Menu
In a library I am using I have the task of moving an element to the front of the dom when it is hovered over. (I make it bigger so I need to see it, then shrink it back when mouse out).
The library I am using has neat solution which uses appendChildren on the active element to move it to the end its parent so further towards the end of the dom and in turn on top.
The problem is I believe that because the element you are moving is the one you are hovering over the mouseout event is lost. Your mouse is still over the node but the mouseout event isn't being fired.
I have stripped the functionality down to confirm the issue. It works fine in Firefox but not in any version of IE. I'm using jQuery here for speed. Solutions can be in plain old Javascript, which would be a preference as it might need to go back up stream.
I can't use z-index here as the elements are vml, the library is Raphael and I am using the toFront call. Sample using ul/li to show issue in a simple example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
li
{
border:1px solid black;
}
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
$("li").mouseover(function(){
$(this).css("border-color","red");
this.parentNode.appendChild(this);
});
$("li").mouseout(function(){
$(this).css("border-color","black");
});
});
</script>
</body>
</html>
Edit: Here is a link to a js paste bin to see it in action. http://jsbin.com/obesa4
**Edit 2: ** See all comments on all answers before posting as lots more info in that.
516
The onmouseleave event occurs when the mouse pointer is moved out of an element.
The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its children. Tip: This event is often used together with the onmouseover event, which occurs when the pointer is moved onto an element, or onto one of its children.
If you depress the mouse button on an element and move your mouse off the element, and then release the mouse button. The only mousedown event fires on the element. Likewise, if you depress the mouse button, and move the mouse over the element, and release the mouse button, the only mouseup event fires on the element.
The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.
The problem is that IE handles mouseover differently, because it behaves like mouseenter and mousemove combined on an element. In other browsers it's just mouseenter.
So even after your mouse has entered the target element and you've changed it's look and reappended it to it's parent mouseover will still fire for every movement of the mouse, the element gets reappended again, which prevents other event handlers from being called.
The solution is to emulate the correct mouseover behavior so that actions in onmouseover are executed only once.
$("li").mouseover( function() {
// make sure these actions are executed only once
if ( this.style.borderColor != "red" ) {
this.style.borderColor = "red";
this.parentNode.appendChild(this);
}
});
Examples
mouseover difference between browsers (bonus: native javascript)
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
