css - 无法选择 sibling

Question

我第一次尝试使用兄弟选择器 + 和/或 ~:

HTML

<div id="social">
    <div class="wrap">
        <div class="follow">Follow us on Twitter</div>
        <img src="images/twitter.png">
    </div>
</div>

CSS

header #social .wrap .follow {  
    display: none;
}

header #social img:hover ~ .follow{
    display: block
}

基本上，默认情况下不显示.follow 中的消息。我希望它在用户将鼠标悬停在图像上时出现。我尝试了 ~(上文)和 +。

Answer 1

兄弟必须出现在元素之后，即

<img src="images/twitter.png">
<div class="follow">Follow us on Twitter</div>

http://jsfiddle.net/y2AX8/