Вопрос по list, jquery, href, hover – jQuery Наведите курсор на <li>

4

У меня есть список элементов, таких как

<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>. Есть идеи ?

извините, да - проблема в том, что все <a> получают добавленный класс hover, а не только отдельный элемент <li>? Tom
В чем проблема? объясни, что ты видишь. Lasse Espeholt

Ваш Ответ

4   ответа
1

это потому, что в вашем примере вы ссылаетесь на все из них, вы вместо этого хотите использовать это.

jQuery('ol li').hover(function () {
    jQuery(this).addClass('hover-enabled');
}, function () {
    jQuery(this).removeClass('hover-enabled');
});
привет, спасибо, но добавит ли элемент hover ТОЛЬКО к элементу <a> с классом blah? то есть liblah а? Tom
8

Потому что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');
});
спасибо да - я хочу применить его к "а". но должно ли это быть jquery (". бла", это)? Tom
Не нужно ссылаться на.blah учебный класс.this Ключевым словом является физическое лицоliтак что вам просто нужно подобратьa вложенный в. Dustin Laine
0

использованиеthis вместо:

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

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

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

Похожие вопросы