html - <img> 将鼠标悬停在一般 sibling 上不起作用

Question

将鼠标悬停在 <div class="like absolute"> 内显示的图像上不会显示 <div class="balloons absolute"> 中的图像.

<div id="container" class="relative">
    <div class="like absolute">
        <a href="#"><img src="http://www.simplemailerresponsive.bugs3.com/images/like.png" width="32" height="32" alt="Like" /></a>
    </div>
    <div class="balloons absolute">
        <a href="#"><img src="http://www.simplemailerresponsive.bugs3.com/images/love_symbol.png" width="24" height="24" alt="Symbol" /></a>
    </div>
</div>

在上面的代码中div#container是 parent <div> “like”和“balloons”互为 sibling 。

CSS:

#container .like a img:hover ~ .balloons > a > img{
    opacity: 1;
}

这是 JSFiddle.

Answer 1

也许您正在寻找这样的东西:

.like{
opacity: 0;
border: none;}

固定的， fiddle : http://jsfiddle.net/psut1e3b/17/

如果您将鼠标悬停在相似的手上，就会出现心形。您可以尝试各种职业/定位以获得您想要的结果。