[英]How to select the nth child of an element and assign a click() function?
[英]How do I select the nth child of an element?
我需要根据悬停的图片更改三张堆叠图片的显示样式。 显然,使用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()选择器
$('#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");
})
这应该工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.