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);
};
}());
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>
You can simply do like this
box.onmouseenter = change;
box.mouseleave = normal;
You must change
addEventListener("click", change, false);
addEventListener("mouseleave", normal, false);
with this
box.addEventListener("click", change, false);
box.addEventListener("mouseout", normal, false);
you just use this
<div class="box" onmouseover="style.background='green'" onmouseout="style.background='red'">
</div>
its work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.