simple and stupid onmouseout eve

Question

ok so here is the problem.

<div class="left">
</div>
<div class="right" onmouseout="this.innerHTML='';">
  <div class="child" id="1">1</div>
  <div class="child" id="2">2</div>
  <div class="child" id="3">3</div>
  <div class="child" id="4">4</div>
  <div class="child" id="5">5</div>
</div>

ok so this all works fine, the element hides itself when I move the mouse from the right div to the left one. Problem is that it also hides when I move among the various divs inside. I need to have the user navigate around the right div, then have it disappear when the move the mouse to the left div.

Another issue is I cannot use jquery on this project, must be done in pure vanilla js. Is there really no way for the DOM to handle this kind of event?

*"Is there really no way"* - If it can be done with jQuery, it can be done with JS. — Spectric, Jun 21 '21 at 19:33

score 2 · Answer 1 · answered Jun 21 '21 at 19:50

As others have pointed out, the correct event to use is mouseleave because, as the documentation states:

mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does. This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).

In addition, you should not be using inline HTML event attributes to set up your events. Instead, follow modern standards and separate your event handling code from your HTML.

And, to hide an element, you should not be removing its content. Instead, literally hide the element, which can be done through CSS with display:none, visibility:hidden, or opacity:0.

document.querySelector("div.right").addEventListener("mouseleave", function(event){
  this.classList.add("hidden");
});

.right { background-color:yellow; }
.hidden { display:none; }

<div class="left">
</div>
<div class="right">
  <div class="child" id="1">1</div>
  <div class="child" id="2">2</div>
  <div class="child" id="3">3</div>
  <div class="child" id="4">4</div>
  <div class="child" id="5">5</div>
</div>

score 1 · Accepted Answer · answered Jun 21 '21 at 19:41

1

You want to use onmouseleave not onmouseout

Mouse Out triggers for every child separately, mouse leave when it leaves the set element.

answered Jun 21 '21 at 19:41

Ant

1,083
1
15
35

1

didn't know mouseleave was a thing. Thanks, works perfectly now – user3005635 Jun 21 '21 at 20:02

biberman · Answer 3 · 2021-06-21T19:51:31.347

You can achieve this in Javascript with the mouseleave event. As inline event listener it would be:

<div class="right" onmouseleave="this.innerHTML = '';">

Working example:

.right {
  width: 50px;
  background-color: yellow;
}

<div class="right" onmouseleave="this.innerHTML = '';">
  <div class="child" id="1">1</div>
  <div class="child" id="2">2</div>
  <div class="child" id="3">3</div>
  <div class="child" id="4">4</div>
  <div class="child" id="5">5</div>
</div>

But it's better to separate JavaScript and HTML. So it would be in JavaScript:

document.querySelector('.right').addEventListener('mouseleave', function() {
    this.innerHTML = '';
});

Working example:

document.querySelector('.right').addEventListener('mouseleave', function() {
  this.innerHTML = '';
});

.right {
  width: 50px;
  background-color: yellow;
}

<div class="right">
  <div class="child" id="1">1</div>
  <div class="child" id="2">2</div>
  <div class="child" id="3">3</div>
  <div class="child" id="4">4</div>
  <div class="child" id="5">5</div>
</div>

simple and stupid onmouseout eve

3 Answers3