Javascript JQuery和hover函数上的奇怪行为

我对页面上所有具有

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的每个像素都会调用hover函数吗

---

当您只将一个函数传递给

时，您可以看到一个工作版本。hover（）

当鼠标进入和离开时，将调用该函数。所以，你要使它在进入和离开时都可见，这与你的mouseleave处理程序相冲突

你可以这样做：

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

或者，稍微干燥一点（代码重复次数少）：

---

工作演示：

当您只将一个函数传递给

时。hover（）

当鼠标进入和离开时调用该函数。所以，你要使它在进入和离开时都可见，这与你的mouseleave处理程序相冲突

你可以这样做：

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

或者，稍微干燥一点（代码重复次数少）：

---

工作演示：

您应该尝试将

悬停部分替换为：

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

或保持
悬停
并执行以下操作：

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

您应该尝试将
悬停部分替换为：

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

或保持
悬停
并执行以下操作：

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

只需停止执行此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对象的事件函数

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

你真的在正确的轨道上，你只是把hover和mouseenter混淆了。我已经试过mouseenter，它做了完全相同的事情：（你真的在正确的轨道上，你只是把hover和mouseenter混淆了。我已经试过mouseenter，它做了完全相同的事情：（很好且清晰的解释，不仅有助于理解这个问题，而且有助于理解hover（）函数的工作原理。不过，我尝试了您的代码（以及Boz和User666的另外两个建议）我仍然得到了同样的行为。我还尝试使用display属性而不是visibility，但运气不佳。@bikey77-你的代码还有一些问题，你没有透露。你删除mouseleave代码了吗？我的答案在这里很好：。@bikey77-我在jsFiddle中添加了一个淡入选项，这样你就可以看到这是怎么回事了同样有效。我已经删除了所有其他javascript，只在我的页面上留下了你的代码，并且在我的第一篇文章中更新了工作演示中的文件。请自己看看，你会发现它不起作用。只是为了澄清，是的，我使用了你和其他用户建议的所有方法，并且还尝试使用css中的显示属性但问题仍然存在。@bikey77-您的页面使用了
.mouseenter（）
。它应该使用
。hover（）
。mouseenter（）
不支持向其传递两个函数。只支持
.hover（）
具有该功能。很好且清晰的解释，不仅有助于理解此问题，而且有助于理解hover（）函数的工作原理。不过，我尝试了您的代码（以及Boz和User666的另外两个建议）我仍然得到了同样的行为。我还尝试使用display属性而不是visibility，但运气不佳。@bikey77-你的代码还有一些问题，你没有透露。你删除mouseleave代码了吗？我的答案在这里很好：。@bikey77-我在jsFiddle中添加了一个淡入选项，这样你就可以看到这是怎么回事了同样有效。我已经删除了所有其他javascript，只在我的页面上留下了你的代码，并且在我的第一篇文章中更新了工作演示中的文件。请自己看看，你会发现它不起作用。只是为了澄清，是的，我使用了你和其他用户建议的所有方法，并且还尝试使用css中的显示属性但问题仍然存在。@bikey77-您的页面使用了
.mouseenter（）
。它应该使用
。hover（）
。mouseenter（）
不支持向其传递两个函数。只支持
.hover（）
具有该功能。感谢您的建议。我很遗憾它没有解决问题…感谢您的建议。我很遗憾它没有解决问题。。。