javascript - JQuery和悬停功能的奇怪行为

Question

我class="box"对页面上的所有 DIV 使用悬停效果：

Javascript：

    JQ(".box").hover(function() {
        JQ(this).nextAll(".tooltip:first").css('visibility','visible');
    });

    JQ(".box").mouseleave(function(event) {
        JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
    });

它在 Firefox 和 Chrome 中运行良好，但在 IE9 和 Opera 中，.tooltip当鼠标在 .box DIV 的边界内移动时，该 div 会不断消失并重新出现。任何想法为什么会为 DIV 的每个像素调用悬停函数？

你可以在这里看到一个工作版本

Answer 1

当您只将一个函数传递给.hover()该函数时，鼠标进入和离开时都会调用该函数。所以，你让它在进入和离开时都可见，这与你的 mouseleave 处理程序冲突。

你可以这样做：

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
}, function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});

或者，多一点 DRY（少重复代码）：

JQ.fn.nextTip = function(vis) {
    return this.nextAll(".tooltip:first").css('visibility', vis);
}

JQ(".box").hover(function() {
    JQ(this).nextTip('visible');
}, function() {
    JQ(this).nextTip('hidden');
});

工作演示：http: //jsfiddle.net/jfriend00/DkgVg/

Answer 2

您应该尝试将hover零件替换为：

JQ(".box").mouseenter(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
});

或保留hover并执行：

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
}, function(){
    JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});

Answer 3

只需停止执行此 jQuery 对象的事件函数

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").stop(true,true).css('visibility','visible');
}, function(){
    JQ(this).nextAll(".tooltip:first").stop(true,true).css('visibility','hidden');
});