mouseenter and mouseleave in javascript not working

Question

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 events. Hope you can help me here. PS: I'm using chrome. don't know how to make js work on fiddle... for now

here's the code:

https://jsfiddle.net/frempong69/t7du0kte/

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

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

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

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

}());

Arun P Johny · Accepted Answer · 2016-02-02T11:53:58.840

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>

score 0 · Answer 2 · answered Feb 02 '16 at 11:53

0

You can simply do like this

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

answered Feb 02 '16 at 11:53

RIYAJ KHAN

15,032
5
31
53

Rakesh Sojitra · Answer 3 · 2016-02-02T14:36:51.983

0

You must change

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

with this

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

edited Feb 02 '16 at 14:36

answered Feb 02 '16 at 11:55

Rakesh Sojitra

3,538
2
17
34

score -1 · Answer 4 · answered Feb 02 '16 at 12:00

-1

you just use this

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

its work

answered Feb 02 '16 at 12:00

Shailesh Singh

317
1
11

Before anyone chooses to [recommend deletion](http://stackoverflow.com/review/low-quality-posts/11115882) of this post, this is a valid attempted answer. This post should not have been flagged and should not be recommended for deletion in the LQPRQ. See: [You're doing it wrong: A plea for sanity in the Low Quality Posts queue](http://meta.stackoverflow.com/q/287563) and [Your answer is in another castle: when is an answer not an answer?](http://meta.stackexchange.com/q/225370) – Feb 03 '16 at 00:28

mouseenter and mouseleave in javascript not working

4 Answers4

Linked