css - 悬停在图像顶部的按钮上时如何对图像应用悬停效果？

Question

我已将悬停效果应用于图像，并希望在将鼠标悬停在放置在该图像顶部的按钮上时保持此悬停效果。我知道之前有人问过有关这些类型的 parent /子女问题的问题，但这些答案不够广泛，无法帮助我自己解决这个特定问题。一个只有 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/