css - 如何用CSS显示和隐藏一个div？

Question

在我的脚本中有三个 div。当我将鼠标悬停在第一行时，我想显示带有 class="ab" 的 div，当悬停在第二行时，我想显示带有 class="abc" 的 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

Answer 1

要隐藏一个元素，使用:

display: none;
visibility: hidden;

要显示一个元素，使用:

display: block;
visibility: visible;

区别在于:

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

如果你设置了visibility而不改变display，即使标签不可见，它仍然占据空间。