jQuery 将鼠标悬停在 <li> 上

Question

我有一个元素列表，例如

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

它有效，但所有 项目都会悬停 - 而不仅仅是单个

。有什么想法吗？

Answer 1

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

假设您希望将该类应用于 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');
});