CODEWITHSUNDEEP
javascripthtmlcssdom
user3005635
user3005635

Reputation: 87

simple and stupid onmouseout eve

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?

Upvotes: 1

Views: 69

Answers (3)

biberman
biberman

Reputation: 5767

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>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

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>

Upvotes: 2

Ant
Ant

Reputation: 1163

You want to use onmouseleave not onmouseout

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

Upvotes: 1

Related Questions