要素のn番目の子を選択するにはどうすればよいですか？

Question

私がホバーした写真に基づいて3枚の写真の表示スタイルを変更する必要があります。 CSSで親と次の人に行くことは不可能です。

私はそれが働くために見つけたコードの部分を使用しようとしました。 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"; 
}) 

Answer 1

あなたはjQueryのセレクタを使用する必要があり、:nth-child()セレクタ

$('#test111').on('mouseover', function() { 
    $("#test222 img:nth-child(2)").css('display', "inline-block"); 
}).on('mouseout', function() { 
    $("#test222 img:nth-child(2)").css('display', "none"); 
}) 

Answer 2

$('#test111').on('mouseover', function() { 
    $("#test222 img:nth-child(2)").css('display', "inline-block"); 
}).on('mouseout', function() { 
    $("#test222 img:nth-child(2)").css('display', "none"); 
}) 

やjqueryのなし：

$('#test111').on('mouseover', function(){ 
document.querySelector("#test222 img:nth-child(2)").style.display = "inline-block"; 
}).on('mouseout', function(){ 
document.querySelector("#test222 img:nth-child(2)").style.display = "none"; 
}) 

Answer 3

$('#test111').on('mouseover', function() { 
    $("#test222")[1].css('display', "inline-block"); 
}).on('mouseout', function() { 
    $("#test222")[1].css('display', "none"); 
}) 

これは