CODEWITHSUNDEEP
javascript
swelet
swelet

Reputation: 8722

Mouseenter when moving and removing elements

Run and consider this here snippet.

If we hover the top row ("one") it will turn red like expected. If we then click it, it will be removed according to plan.

However, since the cursor will now be in the second row ("two") I would then expect "mousenter" to fire and make that row red too. But if we keep the mouse still while clicking mousenter does not seem to fire.

Is there a way to force it to fire?

function hideMe (elmnt) {
  elmnt.remove()
  // elmnt.style.display = "none" (is an alternative solution
  // that works, but is not what I need)
}

function iveBeenHovered (elmnt) {
	elmnt.style.backgroundColor = "red"
}
div{
  border: 1px solid black;
}
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">One</div>
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">Two</div>
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">Three</div>

Upvotes: 0

Views: 35

Answers (2)

pablito.aven
pablito.aven

Reputation: 1165

You could force iveBeenHoveredfunction on the next element when you click one of them.

function hideMe (elmnt) {
  if ( elmnt.nextSibling != null ){
    iveBeenHovered( elmnt.nextSibling );
  }
  elmnt.remove()
}

Upvotes: 0

Christian Carrillo
Christian Carrillo

Reputation: 414

You can use nextElementSibling to find next element and put background before remove.

Check this code:

function hideMe (elmnt) {
  elmnt.nextElementSibling.style.backgroundColor = "red"
  elmnt.remove()
  // elmnt.style.display = "none" (is an alternative solution
  // that works, but is not what I need)
}

function iveBeenHovered (elmnt) {
	elmnt.style.backgroundColor = "red"
}
div{
  border: 1px solid black;
}
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">One</div>
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">Two</div>
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">Three</div>

Upvotes: 1

Related Questions