Question

所以我有一个问题，当我加载文档时，我有一个名为.active的类，它会根据您使用键盘导航查看的列表项而改变。问题是当该列表项有活动分配给它时，我希望该列表项仅在悬停时显示另一条内容..但问题是，我相信，我的悬停功能只是触发页面加载，并且只附加到任何列表项，在加载时为其分配了.active。

<ul>
<li class="active">Foo <a class="more-info" href="#">Click Me</a></li>
<li>Bar <a class="more-info" href="#">Click Me</a></li>
<li>Pie <a class="more-info" href="#">Click Me</a></li>
</ul>

当用户使用他们的键盘导航时，上一个列表项将不再具有.active，下一个将被分配该类，如下所示：

<ul>
<li>Foo <a class="more-info" href="#">Click Me</a></li>
<li class="active">Bar <a class="more-info" href="#">Click Me</a></li>
<li>Pie <a class="more-info" href="#">Click Me</a></li>
</ul>

我想要发生的是，当用户悬停新的列表项时，会向他们显示a.more-info，但它不起作用。我再次相信，这是因为.hover（）;只在页面加载时运行一次，而不是一直听...

 $("li.active").hover(
    function () {
        $('li.active a.more-info').fadeIn();
    },
    function () {
        $('li.active a.more-info').fadeOut();
    });

有什么想法吗？

Answer 1

（...）并且仅附加到任何列表项，在加载时为其分配了.active

您是对的，处理程序仅附加到具有类li的{{1}}个元素。但您可以在运行时检查它们具有哪个类：

active

假设加载页面时存在所有列表元素。否则，您必须将其与$("li").hover( // attach the handler all li elements function () { if($(this).hasClass('active')) // check for 'active' class $('a.more-info', this).fadeIn(); }, function () { if($(this).hasClass('active')) $('a.more-info', this).fadeOut(); });结合使用。请注意，如果不通过Ajax加载列表，不需要 live()。

我再次相信，这是因为.hover（）;只在页面加载时运行一次，而不是一直听...

这是不正确的。 处理程序仅附加在页面加载上（因此，您的函数调用仅执行一次）。但是当鼠标光标位于live()元素上时，事件将始终触发。然后调用处理程序。

Answer 2

$("li.active").live({
   mouseenter: function()  {
        $('li.active a.more-info').fadeIn();
   },
   mouseleave: function() {
        $('li.active a.more-info').fadeOut();
   }
});

http://api.jquery.com/live/

jQuery的直播旨在处理您的确切情况。

更改类名和.hover（）

2 个答案: