liタグにis_activeと付いていない画像にマウスオーバーすると画像名の語尾に_onと付けたいのですが、どうしてもis_activeが付いたメニューまで_onが付いてしまい、画像リンク切れになってしまいます。
(top_on_on.pngになってしまう)
※Wordpressを絡める予定なので、アクティブなメニューの画像名には「_on」と付けたくないと思っています。
すみません。よろしくお願いします。
html
1<ul class="menu"> 2 <li class="is_active"><a href="/"><img src="top.png" alt="Top"></a></li> 3 <li><a href="/about.html"><img src="about.png" alt="Journal"></a></li> 4 <li><a href="/about.html"><img src="hogehoge.png" alt="Things"></a></li> 5 <li><a href="/aheahe.html"><img src="aheahe.png" alt="Calendar"></a></li> 6</ul>
javasctipt
1 2// is_activeクラスを持っているli内のimgに_onを付ける 3is_activeMenuImg.attr('src', changeOnImg); 4 5//ココ 6$('.menu li a img').mouseover(function() { 7 if( $(this).parent().parent().not('.is_active') ) { 8 $(this).attr('src', $(this).attr("src").replace(".png", "_on.png")); 9 } 10}); 11 12//マウスアウト時 13$('.menu a img').mouseout(function() { 14 $(this).attr('src', $(this).attr('src').replace('_on.png', '.png')); 15});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/17 09:14
2017/01/17 10:10