初心者です jQueryのマウスオーバーについて
jQueryを使った画像を使ったメニューを作成しています。
<ul class="drop2">をマウスオーバーしたときに親の位置にある画像１.gifが画像１_o.gifに
切り替わるようにしたいと思っています。
調べながら作ってみたのですが、画像の切替がうまくいきません。
parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを
作ると、他のulにマウスオーバーしたときも切り替わってしまいます。
ご教授して頂けると嬉しいです。
よろしくお願いいたします。
■スクリプト部分
jQuery(function ($) {
$('ul.drop2').mouseover(function () {
// console.log('mouseover'); デバック用
var onSrc = $（this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif');
$（this).parent('ul.drop1 a img').attr('src', onSrc);
});
$('ul.drop2').mouseout(function () {
var onSrc =$（this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif');
$（this).parent('ul.drop1 a img').attr('src', onSrc);
});
});
■html部分
<ul class="drop1">
<li><a href="/"><img src="画像1.gif" alt="HOME" /></a>
<ul class="drop2">
<li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li>
<li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li>
</ul>
</li>
</ul>
お礼
ありがとうございます。 改行すると２行になるのですね。 勉強になりました。ありがとうございます。