如何选择元素的第n个子元素？

我需要根据我悬停的图片更改三个堆叠图片的显示样式。显然，不可能通过CSS :hover上到父母和下一个。如何选择元素的第n个子元素？

我试图使用我发现的部分代码来使它工作。 JavaScript适用于第一个孩子，但我不能让它显示第二个孩子。

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"; 
})

来源

2016-05-15 AGN

'（文件）.getElementById（ “test222 IMG：第n个孩子（2）”）'是不是有效选择。 –

你应该使用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"); 
})

来源

2016-05-15 08:44:51 Satpal

@PraveenKumar为什么它的错误答案？ –

谢谢，基本上，我用了一个完全错误的选择器。有没有办法使用（document）.getElementById（）来实现相同的结果，还是从一开始就是一个失败的原因？ – AGN

@Satpal在SO编辑他人的答案是[鼓励]（http://stackoverflow.com/help/editing），特别是在这种小拼写错误的情况下。 –

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

来源

2016-05-15 08:47:45

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

这应该工作

来源

2016-05-15 09:10:19 ARGUS

如何选择元素的第n个子元素？

回答

相关问题