Question

我已经花了一段时间阅读jQuery悬停问题的各种其他帖子，并尝试不同的方法让我的jQuery悬停功能正常工作无济于事。

我正在努力实现的目标

我想用jQuery的悬停事件隐藏/显示li元素中的div。

发生了什么

div隐藏/显示正确，但如果鼠标从一个li元素快速移动到下一个元素，有时隐藏（mouseleave）似乎没有被执行。这使得应该隐藏的div可见。

演示

http://jsfiddle.net/vJPNT/11/

在演示中，您将看到此效果。当鼠标滚过li元素时，会出现一个包含“Delete”链接的div，但如果鼠标快速跳转到下一个li元素，则它并不总是消失。

如果需要任何额外信息，请告诉我。感谢。

Answer 1

function updateIn(e) {
    $(this).find('.actions').show();  
    $(this).siblings().find('.actions').hide();  
}

function updateOut(e) {
    $(this).find('.actions').hide();  
}

$('li.update').hover(updateIn, updateOut);
$('li.update .actions').hide();

在每个新updateIn之前，您应该隐藏其他显示的操作。

Answer 2

我在你的两个函数中添加了console.log（$（e.target））。好像有时e.target是li元素中的div之一。这可能是因为您捕获了传播的悬停事件。

通过将$（e.target）更改为$（this），你应该没问题。

function updateIn(e) {
    $(this).find('.actions').show();                
    console.log($(e.target));
}

function updateOut(e) {
    $(this).find('.actions').hide();  
    console.log($(e.target));
}

$('li.update').hover(updateIn, updateOut);
$('li.update .actions').hide();

Answer 3

事件发生在不同的元素中。您的find函数不仅返回.update类对象。 .update

奇怪的jQuery悬停行为

3 个答案: