Question

我已将悬停效果应用于图像，并希望在将鼠标悬停在该图像顶部的按钮上时保持此悬停效果。我之前已经问过围绕这些类型的父母/子女问题的问题，但这些答案并不足以帮助我自己解决这个问题。 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%;
}

希望有人可以帮助我，

斯泰恩

Answer 1

将.image:hover:after规则更改为.picture:hover .image:after。：hover适用于鼠标所在的任何内容，以及它的父元素，但按钮和图像是兄弟姐妹。更改要在其共同父div（.picture）上检测到的悬停会导致正确检测悬停

.picture:hover .image:after {
opacity:1;
}

http://jsfiddle.net/5n7gj8uc/

Answer 2

您可以使用父div激活悬停效果，如下所示：

.picture:hover > .image:after {
    opacity:1;
}

http://jsfiddle.net/k8dbfs3r/5/

将鼠标悬停在该图像顶部的按钮上时，如何将悬停效果应用于图像？

2 个答案: