JQuery和hover函数的奇怪行为

我正在页面上使用class="box"所有DIV使用hover效果：

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的每个像素调用hoverfunction的任何想法？

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

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