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

Question

在我的脚本中有三个div。当我将鼠标悬停在第一行时，我希望在class="ab"处显示div，并在将鼠标悬停在第二行时显示div class="abc"。否则，我希望默认显示带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;

区别在于：

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

如果设置visibility并且不更改display，即使看不到标记，仍会占用空间。

Answer 2

你需要

.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元素隐藏。

Answer 3

您可以使用以下五种方法中的任何一种来隐藏元素，具体取决于您的要求。

不透明度

.hide {
  opacity: 0;
}

可见性

.hide {
   visibility: hidden;
}

显示

.hide {
   display: none;
}

位置

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

夹路径

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

要显示以下任何一项： 不透明度：1; 可见性：可见; 显示：阻止;

来源：https://www.sitepoint.com/five-ways-to-hide-elements-in-css/

Answer 4

Html代码：

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

脚本代码：

$(document).ready(function() {
    $("#f").mouseover(function(){
        $('.a,.abc').addClass('hideDiv');
        $('.ab').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });

    $("#s").mouseover(function(){
        $('.a,.ab').addClass('hideDiv');
        $('.abc').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });
});

css代码：

.hideDiv
{
    display:none;
}