jQueryを使用してホバリングセレクターを取得

Question

私はここで非常にばかげていると思うが、ここに行く。

私は基本的なstructueとメニューを持っている：私が何をしようとしています何

<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を使用する理由は何ですか？純粋なCSSのセレクタhover`：http://jsfiddle.net/alnitak/fZwJ7/

Answer 2

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

Answer 3

この問題は、JavaScriptではなくCSSによって最もよく解決されます。

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

Answer 4

あなたは、このための基本的なCSSを使用する必要があります：あなたは、あなたの#menuをoverqualifyingている

#menu li span{ 
    color : #000000; 
} 

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

Answer 5

ので、この代わりにしてみてください：あなたはまた、CSSでこれを行うことができます

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

注意をただし、:hover疑似セレクタは、a以外ではnot properly supported in older versions of Internet Explorerです。