HTML
1<div id="left"> 2 <h3>〇〇〇</h3> 3</div> 4<div id="right"> 5 <h3>△△△</h3> 6 <ul> 7 <li><img src="images/icon_1.png" alt="" /></li> 8 <li><img src="images/icon_2.png" alt="" /></li> 9 <li><img src="images/icon_3.png" alt="" /></li> 10 <li><img src="images/icon_4.png" alt="" /></li> 11 <li><img src="images/icon_5.png" alt="" /></li> 12 </ul> 13</div>
CSS
1#spaleft{ 2 position:absolute; 3 left:0; 4 z-index:200; 5 background-image:url(images/icon_0.png); 6 height:580px; 7 width:785px; 8 transition:all 1s; 9} 10#sparight{ 11 position:absolute; 12 right:0; 13 z-index:100; 14 background-image:url(images/icon_999.png); 15 height:580px; 16 width:785px; 17}
jQuery
1$('#right ul li:nth-child(1)').hover( 2 function(){ 3 $('#left').css('background-image','url(images/icon_hover_1.png)'); 4 }, 5 function(){ 6 $('#left').css('background-image','url(images/icon_0.png)'); 7 } 8);
【やりたいこと】
leftの背景画像をright ul liがhoverした時に変更したい。
試しに1つ目のliがhoverした時に画像変更できるようにコードを書いて
みましたが1つ目のliにhoverした時に背景画像が消えてしまいました。
コード自体がおかしいかと思いbackground-image以外のcssを書いてみたら
適用されたのでbackground-imageの書き方がおかしいのでしょうか?
調べてでてきたコードと同じコードだと思うのですが動作しない理由がわかりません。
お手数ですがご教授お願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/16 11:51
2019/04/16 11:54
2019/04/16 12:57
2019/04/16 13:17
2019/04/16 13:30