js ロールオーバーについて

質問

初めまして。javascriptについてお聞きします。

下記HTMLのように、メニューを<ul>で並べております。
javascriptで<li>にマウスオーバーした時に、
内包しているクラスの.dateのフォント色を変えようと、jsを下記のように書きました。

するとマウスオーバーしている<li>の.dateだけではなく、
全ての.dateのフォント色が変化してしまいました。

色々試しましたが、上手くいきません。
マウスオーバーしている部分にだけ、変化させるにはどうしたら良いでしょうか。
どうぞよろしくお願いいたします。

■js
$(function(){
$(".Menu li").mouseover(function(){
$(".date").css("color","white");
}).mouseout(function(){
$(".date").css("color","black");
});
});

■html
<div class="Menu">
<li>
<p class="date">2012/3/13</p>
<p>テキストテキストテキストテキスト</p>
</li>
<li>
<p class="date">2012/3/12</p>
<p>テキストテキストテキストテキスト</p>
</li>
<li>
<p class="date">2012/3/11</p>
<p>テキストテキストテキストテキスト</p>
</li>

</div>

回答No.1

hig77 · ベストアンサー

ｊｓの3行目と4行目を以下のようにして下さい。
$(".date",this).css("color","white");
$(".date",this).css("color","black");

以下でも同じ結果になります。
$(this).find(".date").css("color","white");
$(this).find(".date").css("color","black");

$(".date") だと、対象のオブジェクトは３個なので、３個全てが変わります。
子要素の指定が必要です。

お礼

上記の通りに試したところ、無事に解決できました。
ありがとうございました！