JQuery和悬停功能的奇怪行为答案

【问题标题】：JQuery and strange behavior on hover functionJQuery和悬停功能的奇怪行为
【发布时间】：2012-12-18 09:11:35
【问题描述】：

我正在为页面上带有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 中，当鼠标在 .box DIV 的边界内移动时，.tooltip div 会消失并不断重新出现。任何想法为什么会一直为 DIV 的每个像素调用悬停函数？

你可以看到一个工作版本here

【问题讨论】：

您确实走在正确的轨道上，您只是将悬停与 mouseenter 混淆了。
我已经尝试过 mouseenter 并且它做了完全相同的事情:(

标签： javascript jquery css

【解决方案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/

【讨论】：

很好而清晰的解释，不仅有助于理解这个问题，还有助于理解 hover() 函数的工作原理。但是，我尝试了您的代码（以及来自 Boz 和 User666 的其他 2 个建议），但我仍然得到相同的行为。我还尝试使用显示属性而不是可见性，但没有运气。
@bikey77 - 您的代码还有其他问题，您没有披露。您是否删除了mouseleave代码？我的回答在这里很好用：jsfiddle.net/jfriend00/DkgVg.
@bikey77 - 我在 jsFiddle 中添加了一个淡入淡出选项，这样你也可以看到它是如何工作的。
我已经删除了所有其他 javascript，只在我的页面上留下了您的代码，并且我在第一篇文章中更新了工作演示中的文件。请自己看一下，您会发现它不起作用。澄清一下，是的，我使用了您和其他用户建议的所有方法，还尝试在 css 中使用 display 属性而不是可见性，但问题仍然存在。
@bikey77 - 您的页面使用.mouseenter()。它应该使用.hover()。 .mouseenter() 不支持传递给它的两个函数。只有.hover() 具有该功能。

【解决方案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');
});

【讨论】：

感谢您的建议。我很遗憾地说它并没有解决问题......

【解决方案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');
});

【讨论】：