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 div消失并在鼠标在.box DIV边界内移动时不断重新出现。有什么想法为什么为DIV的每个像素调用悬停功能？

您可以看到工作版here

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');
});

JQuery和悬停函数上的奇怪行为

3 个答案: