How do I select the nth child of an element?
<p>I need to change the display style of three stacked pictures based on the picture I hover on. Apparently it's impossible to go up to the parent and to the next with CSS <code>:hover</code>.</p>

<p>I tried to use parts of code I found to get it working. JavaScript works on the first child but I can't get it to display the 2nd child instead.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="c-tab is-active"&gt;
    &lt;div class="c-tab__content"&gt;
    &lt;div class="row" id="mapviewer"&gt;
        &lt;div class="col-xs-4 nopadding" style="" id="d_d2"&gt;
            &lt;div class="dd21 viewer1" id="test111"&gt;
                &lt;img class="map" src="images/d/dd2.png" &gt;
                &lt;img class="map" src="images/hover1/mockuptopage_01.png" &gt;
                &lt;img class="map" src="images/hover2/mockuptopage_01.png" &gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-4 nopadding" style="" id="n_d2"&gt;
            &lt;div class= "nd21 viewer2" id="test222"&gt;
                &lt;img class="map" src="images/n/dd2.png" &gt;
                &lt;img class="map" src="images/hover2/mockuptopage_03.png" &gt;
                &lt;img class="map" src="images/hover3/mockuptopage_01.png" &gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-4 nopadding" style="" id="s_d2"&gt;
            &lt;div class="sd21 viewer3" id="test333"&gt;
                &lt;img class="map" src="images/s/dd2.png"&gt;
                &lt;img class="map" src="images/hover2/mockuptopage_03.png"&gt;
                &lt;img class="map" src="images/hover3/mockuptopage_01.png" &gt;
            &lt;/div&gt;  
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p><strong>JS:</strong></p>

<pre><code>$('#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";
})
</code></pre>