Question

我的代码如下：

HTML：

<a href="#">foo</a>
<div id="bar">bar</div>

jQuery的：

$('a').hover(function(){
    console.log('hovered');
},function(){
    if($('#bar').is(':hover')===false){
        console.log('bar is not hovered');
    }
});

但是在foo的mouseleave上，我想检查bar是否悬停。因此，从foo鼠标移动到bar，但它记录我的条形图没有悬停。

jsfiddle

Answer 1

这似乎是由Internet Explorer处理CSS和Javascript的顺序引起的。元素之间没有差距，所以这不是问题。您的代码可以在Chrome中正常运行。

这有点难看，但它支持我的结论，即Internet在CSS改变之前处理Javascript＆amp;它确实提供了一种获得预期结果的方法。添加setTimeout(fn, 0)可以通过暂停Javascript足以处理CSS来解决您的问题。

$('a').hover(function(){
    console.log('hovered');
},function(){
    setTimeout(function(){
        if($('#bar').is(':hover')===false){
            console.log('bar is not hovered');
        }
    }, 0);
});

这里是jsfiddle。

您可能还想阅读这个问题（Why is setTimeout(fn, 0) sometimes useful?），因为它有一些非常有用的信息可以解释发生了什么。

Answer 2

FIDDLE

函数嵌套将按照您的要求工作：

$(document).ready(function(){
    $('a').hover(function(){
        console.log('A link is hovered');
    },function(){
        console.log('A link is Not hovered');
        $('#bar').hover(function(){
            console.log('Div is hovered');          
        },function(){
            console.log('Div is Not hovered');
        }); 
    });
});

Answer 3

确保元素之间没有间隙。例如，检查此CSS：

#bar{
    float: left;
    background: green;
}

a {
    float: left;
    background: red;
}

float不会在元素之间产生任何差距。查看jsFiddle Demo。

检查悬停在元素的mouseleave上

3 个答案: