jQuery 悬停在 <li>

【问题标题】：jQuery Hover on <li>jQuery 悬停在 <li>
【发布时间】：2010-08-20 18:22:01
【问题描述】：

我有一个元素列表，例如

<ol>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<ol>

我想添加一个悬停元素，这样当用户悬停在

上时，只有项目悬停。

我有这个（启用悬停只是一种颜色）

jQuery('ol li').hover(function () {
    jQuery('ol li.blah a').addClass('hover-enabled');
}, function () {
    jQuery('ol li.blah a').removeClass('hover-enabled');
});

它可以工作，但所有项都悬停 - 不仅仅是单个

。有什么想法吗？

【问题讨论】：

有什么问题？解释你所看到的。
抱歉，问题是所有的都添加了启用悬停的类，而不仅仅是单个
元素？

标签： jquery list hover href

【解决方案1】：

因为ol li.blah a 选择器对于所有列表项a 元素都为真。

这是假设您希望将类应用于a 元素而不是li 元素。

jQuery('ol li').hover(function () {
    jQuery("a", this).addClass('hover-enabled');
}, function () {
    jQuery("a", this).removeClass('hover-enabled');
});

如果您希望 li 拥有该类，请使用：

jQuery('ol li').hover(function () {
    jQuery(this).addClass('hover-enabled');
}, function () {
    jQuery(this).removeClass('hover-enabled');
});

【讨论】：

谢谢-我确实想将它应用于“a”。但它应该是 jquery(".blah a", this) 吗？
它应该不需要引用.blah 类。 this 关键字是单独的 li，因此您只需选择嵌套在其中的 a。

【解决方案2】：

这是因为在您的示例中您引用了所有这些，而您想使用它。

jQuery('ol li').hover(function () {
    jQuery(this).addClass('hover-enabled');
}, function () {
    jQuery(this).removeClass('hover-enabled');
});

【讨论】：

hi thx - 但这会将悬停元素仅添加到具有类 blah 的元素吗？即 li.blah a ?

【解决方案3】：

改用this：

jQuery('ol li').hover(function () {
    jQuery(this).addClass('hover-enabled');
}, function () {
    jQuery(this).removeClass('hover-enabled');
});

【讨论】：

【解决方案4】：

如果有人在让它工作时遇到任何问题，您可能需要将代码移到最后或将其包装到文档就绪函数中，如下所示：

$(document).ready(function () {
    jQuery('ol li').hover(function () {
        jQuery(this).addClass('hover-enabled');
    }, function () {
        jQuery(this).removeClass('hover-enabled');
    });
});

【讨论】：