如何使用 CSS 显示和隐藏 div？

Question

在我的脚本中有三个 div。当我将鼠标悬停在第一行时，我想用 class="ab" class="abc" div，当悬停在第二行时，我想用 — 显示 div。否则，我想默认使用 class="a" 显示 div。

但它从不显示带有 class="a" 的 div。

 .abc,.ab {
    display: none;
}
#f:hover ~ .ab {
    display: block;

}
#f:hover ~ .abc,.a {
    display: none;

}
#s:hover ~ .abc {
    display: block;

}
#s:hover ~ .ab,.a {
    display: none;
}

 <a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

这是我的问题的 JSFiddle： JSFiddle Link

原文由 mridul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你需要

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

在 http://jsfiddle.net/gaby/n5fzB/2/ 更新了演示

---

您原始 CSS 中的问题是 , 在 css 选择器中启动了一个全新的选择器。它没有合并.. 所以 #f:hover ~ .abc,.a 表示 #f:hover ~ .abc 和 .a 。您将其设置为 display:none 因此它始终设置为对所有 .a 元素隐藏。

原文由 Gabriele Petrioli 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

要隐藏元素，请使用：

 display: none;
visibility: hidden;

要显示元素，请使用：

 display: block;
visibility: visible;

区别在于：

可见性处理标签的可见性， display 处理它在页面上占据的空间。

如果设置了 visibility 而没有更改 display ，即使看不到标签， 它仍然占用空间。

原文由 multiplatform 发布，翻译遵循 CC BY-SA 3.0 许可协议