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>

我想添加一个悬停元素，以便当用户将鼠标悬停在＆lt; li＆gt;上时然后只有那些项目＆lt; a＆gt;徘徊。

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

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

它起作用但是所有＆lt; a＆gt;项目悬停 - 不仅仅是个人＆lt; li＆gt;。有什么想法吗？

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

Answer 2

这是因为在你的例子中你引用了所有这些，你想要使用它。

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

Answer 3

改为使用this：

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

Answer 4

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

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

jQuery悬停在<li> </li>上

4 个答案: