Получить зависший селектор с помощью jQuery

Question

Я думаю, что я здесь очень глупый, но здесь идет.

У меня есть меню с базовой структурой:

<ul id="menu">
<li>
<h3><a href="/products/">Products</a></h3>
<span><a href="/products/">Have a look</a></span>
</li>
</ul>

То, что я пытаюсь сделать, это когда пользователь зависаетнад <li> измените текст <span> на белый.Вот что у меня есть:

$('ul#menu li').mouseenter(function(){
   $(this+ 'span a').css('color','white');
});

Но это не работает?Я думаю, потому что $ (это) является объектом, и я просто хочу строку?

Answer 1

Зачем вообще использовать JS?

#menu > li:hover > span a {
   color: white;
}

Рабочий пример на http://jsfiddle.net/alnitak/fZwJ7/

Answer 2

Вы преувеличиваете #menu, поэтому попробуйте это вместо:

$('#menu li').hover(function() {
  $(this).find('span > a').css({'color' : 'white'});
});

Обратите внимание, что вы также можете сделать это в CSS, однако псевдо-селектор :hover не поддерживается более старые версии Internet Explorer на любых других устройствах, кроме a.

Answer 3

Ваша проблема лучше всего решается с помощью CSS, а не JavaScript.

ul#menu li:hover span a {
    color: white;
}

Answer 4

Вы должны использовать базовые CSS для этого:

#menu li span{
    color : #000000;
}

#menu li:hover span{
    color : #ffffff;
}

Answer 5

$('ul#menu li').mouseover(function(){
   $(this).find('span a').css('color','white');
});