一般兄弟系统上的<img>悬停不起作用

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>”和“气球”是彼此的兄弟。

CSS：

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

这是JSFiddle.

Answer 1

也许你正在寻找类似这样的东西：

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

Fixed，Fiddle：http://jsfiddle.net/psut1e3b/17/

如果你将鼠标悬停在相似的手上，心就会出现。你可以尝试不同的类/位置来获得你想要的结果。

Answer 2

Like按钮总是可见的。在Hover上:显示了气球。就这样。我不确定这是否是你要找的: Fiddle (http://jsfiddle.net/3ddzzeqe/)

CSS：

.balloons{
    display:none;
}

.like:hover + .balloons{
    display:block;
}