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>

我想添加一个悬停元素,这样当用户将鼠标悬停在<li>上时,只有那些项<a>悬停.

我有这个(启用悬停的只是一种颜色)

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

它可以工作,但所有<a>项目都悬停 - 而不仅仅是个人<li>.有任何想法吗 ？

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