<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#container是父<div> “ like”和“ balloons”是彼此的兄弟姐妹。

CSS：

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

这是JSFiddle。

Answer 1

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

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

固定，小提琴： http ： //jsfiddle.net/psut1e3b/17/

如果将鼠标悬停在类似的手上，就会出现心脏。 您可以使用各种课程/位置来获得所需的结果。

Answer 2

“赞”按钮始终可见。 悬停时：显示气球。 而已。 我不确定这是否是您要寻找的：Fiddle（ http://jsfiddle.net/3ddzzeqe/ ）

CSS：

.balloons{
    display:none;
}

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