我已对图像应用了悬停效果，并希望在悬停在该图像顶部的按钮上时保持此悬停效果。我知道以前曾问过有关此类父母/子女问题的问题，但这些答案还不够广泛，无法帮助我自己解决这个特殊问题。仅使用CSS的解决方案会不错，但是我想它需要一些JS来解决。
这是JSfiddle：http : //jsfiddle.net/stijn777/k8dbfs3r/3/
正如您在下面的HTML中看到的那样，当我将鼠标悬停在图片类内部的按钮上时，我也希望对图片类应用悬停效果。
<div class="picture">
<a class="image" href="./profile-picture.html">
<img alt="" src="http://www.liverpoolblogg.no/wp-content/uploads/2013/09/Daniel-Sturridge1.jpg">
</a>
<input class="image btn btn-6 btn-6d" a href="www.test.com" type="button" value=" ADD " />
<div class="player">
<a href="./profile.html">Name</a>
</div>
</div>
我将以下CSS用于图像以及图像顶部的按钮。
.image:after {
content:'\A';
position:absolute;
width:55%; height: 70%;
top:0; left:0;
background:rgba(0,0,0,0.25);
opacity:0;
border-radius: 6px 6px 0px 0px;
}
.image {
width: 100%;
}
.image:hover:after {
opacity:1;
}
.picture:hover input {
display: block;
}
.picture .player {
position:absolute;
margin-top: -40px;
background-color: white;
opacity: 0.7;
width: 55%;
height: 40px;
padding-top: 8px;
text-align: center;
}
.player a {
color: #000000;
font-family: sans-serif;
font-size: 14px;
text-decoration: none;
}
.picture input {
position:absolute;
top: 0;
left: 0;
margin-top: 10px;
width: 55%;
}
希望有人能帮助我，
斯蒂金
将.image:hover:after规则更改为.picture:hover .image:after。：hover适用于鼠标悬停的任何元素及其父元素，但是按钮和图像是同级元素。更改要在其共同的父div（.picture）上检测到的悬停将导致正确检测到悬停
.picture:hover .image:after {
opacity:1;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句