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 имеет значение true для всех элементов списка 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

Если у кого-то возникли проблемы с запуском этого, вам может понадобиться переместить код в конец или обернуть его в функцию готовности к документу, например:

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

Answer 4

используйте this вместо:

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