OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

初心者です jQueryのマウスオーバーについて

  • 困ってます
  • 質問No.6904933
  • 閲覧数222
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 100% (1/1)

jQueryを使った画像を使ったメニューを作成しています。


<ul class="drop2">をマウスオーバーしたときに親の位置にある画像1.gifが画像1_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>
通報する
  • 回答数1
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 61% (1594/2576)

全体がよくわかってませんが、とりあえず、ご提示のHTMLの構成に限定してよいのなら…

こんなのでは?

jQuery(function($){
 $('ul.drop2').hover(
  function(){ change(this, true); },
  function(){ change(this); }
 );

 function change(e, f){
  var img = $(e).parent("li").find(">a>img"),
    src = img.attr("src");
  src = f?src.replace(/\.gif$/, "_o.gif"):src.replace(/_o\.gif$/,".gif");
  img.attr("src", src);
 }
});
お礼コメント
lowk11

お礼率 100% (1/1)

>fujillinさま

回答ありがとうございます。

質問が説明不足でした。

ドロップダウンメニューを作っていまして、画像1.gifをマウスオーバーしたときに
<ul class="drop2">をドロップダウンさせて、<ul class="drop2">にマウスオーバー中は画像1.gifを
別画像に切り替わるようにするのが理想です。

ドロップダウンメニューは動いてるのですが、<ul class="drop2">にマウスオーバー中の画像切替が
出来なくて困っていました。


fujillinさまのスクリプトで無事に動かすとこができました!
本当にありがとうごじました!
投稿日時 - 2011-07-28 23:29:25
-PR-
-PR-
このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ