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

但它不起作用？我认为它因为$（this）是一个对象，我只想要一个字符串？

Answer 1

为什么要使用JS？

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

http://jsfiddle.net/alnitak/fZwJ7/

的工作示例

Answer 2

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

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

您的#menu资格过高，请尝试以下方式：

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

请注意，您也可以在CSS中执行此操作，但:hover伪选择器a除了{{1}}以外的其他任何内容。