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

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

类似按钮始终可见。在悬停时：显示气球。就是这样。我不确定这是否是你要找的：小提琴（http://jsfiddle.net/3ddzzeqe/）

CSS：

.balloons{
    display:none;
}

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

<img/>将鼠标悬停在一般兄弟姐妹身上是行不通的

2 个答案: