Question

我使用jQuery构建了一个菜单，它显示了当用户将鼠标悬停在元素上时淡出的新元素，并在鼠标移开时将其淡出。现在，我已经将元素向上移动，因此它覆盖了原始元素，这会导致在将新元素放在顶部时触发第二个悬停事件的问题。什么是忽略新元素的最佳方法，只有在鼠标移出原始元素的边界后才会淡出？

以下是代码：

$('#menuitem').hover(function() {
    $('#menu').append('<span id="hover_'+$(this).attr('rel')+'" class="hover"></span>');
}, function() {
    $('#hover_'+$(this).attr('rel')).fadeOut(function(){$(this).remove();});
});

现在，#menu项是一个包含一些文本的锚点，当鼠标悬停在它上面时，一个新元素（.hover）应该出现在顶部，一旦鼠标离开就会淡出原始菜单项。

当前正在发生的事情是，当新项目添加到原始锚点之上时，新元素会立即显示并淡出，因为第二个悬停功能会被触发。

谢谢， Ĵ

Answer 1

删除监听器：

$(element_here).unbind(); // If you used $(element_here).bind(); or .hover();
$(element_here).die(); // If you used $(element_here).live();

然后在鼠标离开旧元素后再将其添加回来。

更有可能是比这更好的解决方案，但我们可能需要查看您正在使用的代码示例，然后我们才能做出更好的尝试。

Answer 2

我在这种情况下发现的最有效的解决方案是在HTML中进行内联绑定。它可能不是最漂亮的方式，但很多时候（根据我的经验）它更容易使绑定内联比试图担心与undind()比赛更容易。这显然不是一个完整的例子，但它应该足以让你开始：

注意：我不确定您在rel attr中存储了哪种数据，所以我只是用这个词来代替那些数据。

HTML

<li id="menuitem" onmouseover="fadeOut(rel)">bar</li>

JS

function fadeOut(rel){
$('#hover_'+rel).fadeOut()
}

jQuery - 从新元素中检测鼠标

2 个答案: