私がホバーした写真に基づいて3枚の写真の表示スタイルを変更する必要があります。 CSSで親と次の人に行くことは不可能です。要素のn番目の子を選択するにはどうすればよいですか?
私はそれが働くために見つけたコードの部分を使用しようとしました。 JavaScriptは最初の子には機能しますが、代わりに2番目の子を表示することはできません。
HTML:
<div class="c-tab is-active">
<div class="c-tab__content">
<div class="row" id="mapviewer">
<div class="col-xs-4 nopadding" style="" id="d_d2">
<div class="dd21 viewer1" id="test111">
<img class="map" src="images/d/dd2.png" >
<img class="map" src="images/hover1/mockuptopage_01.png" >
<img class="map" src="images/hover2/mockuptopage_01.png" >
</div>
</div>
<div class="col-xs-4 nopadding" style="" id="n_d2">
<div class= "nd21 viewer2" id="test222">
<img class="map" src="images/n/dd2.png" >
<img class="map" src="images/hover2/mockuptopage_03.png" >
<img class="map" src="images/hover3/mockuptopage_01.png" >
</div>
</div>
<div class="col-xs-4 nopadding" style="" id="s_d2">
<div class="sd21 viewer3" id="test333">
<img class="map" src="images/s/dd2.png">
<img class="map" src="images/hover2/mockuptopage_03.png">
<img class="map" src="images/hover3/mockuptopage_01.png" >
</div>
</div>
</div>
</div>
JS:
$('#test111').on('mouseover', function() {
(document).getElementById("test222 img:nth-child(2)").style.display = "inline-block";
}).on('mouseout', function() {
(document).getElementById("test222:nth-child(2)").style.display = "none";
})
'(文書).getElementById( "test222のIMG:n番目の子(2)")動作するはずです'有効ではありませんがセレクタ。 –