Mouseenter And Mouseleave In Javascript Not Working

I am having issue with the mouseenter and the mouseleave event in javascript. The strange thing is that the code works if you substitute these 2 events with click or dblclick event

Solution 1:

You are adding the mouseleave/mouseenter handlers to the window object. The click handler works because it bubbles to the window object, but the mouseenter and mouseleave events doesn't bubble so the listeners attached to the window object won't get triggered

You need add the listerns to the box element

(function() {
  window.onload = function() {
    var box = document.getElementsByClassName("box")[0];

    var change = function() {
      box.style.backgroundColor = "green";
    };

    var normal = function() {
      box.style.backgroundColor = "blue";
    }

    box.addEventListener("mouseenter", change, false);
    box.addEventListener("mouseleave", normal, false);
  };


}());

.box {
  background-color: red;
  width: 400px;
  height: 200px;
  margin: 50px auto;
  position: relative;
}
.box:after {
  content: " ";
  width: 0px;
  height: 0px;
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid red;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -100px
}

<div class="box">
</div>

Solution 2:

You can simply do like this

 box.onmouseenter = change;
 box.mouseleave = normal;

Solution 3:

you just use this

<div class="box" onmouseover="style.background='green'" onmouseout="style.background='red'">
</div>

its work

Solution 4:

You must change

addEventListener("click", change, false);
addEventListener("mouseleave", normal, false);

with this

box.addEventListener("click", change, false);
box.addEventListener("mouseout", normal, false);