CSS：使用悬停显示div

Question

我希望鼠标结束时看到第二个div。

HTML

<a>Hover over me!</a>
<div class="ab">Some content</div>
<div class="abc">Some text here</div>

CSS

.abc {
    display: none;
}
a:hover + .abc{
    display: block;

}

Answer 1

相邻兄弟组合并不完全符合您的要求。它只能选择类.ab的div，因为它直接跟随锚。

你想要的是这个：

a:hover ~ .abc {
    /*...*/
}

这将选择跟随悬停的锚元素的每个.abc，但它不必直接在它之前。

Answer 2

有一些延迟到达所以这是迟到的。这是我的答案的小提琴：http://jsfiddle.net/digitalextremist/F5k4L/

这里的主要问题是使用@ kleinfreud关于相邻div的建议，但是在另一种显示和隐藏div的方法中编织：

.abc {
    opacity: 0;
}
a:hover ~ .abc{
    opacity: 100;
}

这样可确保div占用的空间保留开始，然后在需要时显示。