is :hover, different result using mouseleave and mousemove
Hi, look at this example page
http://www.gametalking.tk/provaIsHover.php
(i'm using jquery/2.0.0)
I need to show the red box hovering the black one, and hide the red leaving th black but ONLY if the mouse is not positioned on the red
It's less convoluted than it might appear, imagine a drop down menu system.
Anyway the problem is that the result of
- var isHovered = !!$('#box2').filter(":hover").length;
is different depending on whether it is positioned insiede the mouseleave event or inside the mousemove...
Why??
Try the page i linked, enalbe browser's console and keep trace of the logs, where you can see that when mouseleave returns (always) false, mousemove returns true
This is the entire code:
- $('#box1').mouseenter(function()
{
$('#box2').css('display','block')
})
$('#box1').mouseleave(function()
{
var isHovered = !!$('#box2').filter(":hover").length;
console.log("mouseleave:"+isHovered)
$(document).bind( "mousemove", handler );
if (isHovered) {return false}
else{$('#box2').css('display','none')}
})
function handler()
{
var isHovered = !!$('#box2').filter(":hover").length;
console.log('mousemove:'+isHovered)
$(document).unbind( "mousemove", handler );
}