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

How do I select the nth child of an element?

本文关键字：元素 何选择 选择      更新时间：2023-09-26

我需要根据悬停在上面的图片来更改三个堆叠图片的显示样式。显然，使用CSS :hover无法上到父图片和下一个图片。

我试着使用我发现的部分代码来让它工作。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";
})

您应该使用jQuery选择器，：nth-child（）Selector

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

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

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

这应该工作

相关文章：