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

【问题标题】：How to display and hide a div with CSS?如何使用 CSS 显示和隐藏 div？
【发布时间】：2014-01-03 02:45:05
【问题描述】：

在我的脚本中有三个 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

【问题讨论】：

标签： css html hover siblings

【解决方案1】：

要隐藏元素，请使用：

display: none;
visibility: hidden;

要显示一个元素，请使用：

display: block;
visibility: visible;

区别在于：

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

如果设置了visibility，不更改display，即使看不到标签，还是占空间。

【讨论】：

为什么不直接使用display: none;？
visibility 规则在设置display:none 时确实是多余的。请注意，切换display 可能会导致周围元素由于空间重新分配而移动。如果不希望出现这种“跳跃”效果，可能需要使用visibility 而不是。

【解决方案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 元素隐藏。

【讨论】：

啊，这就是他的意思。他本可以说“当其他人悬停时隐藏.a”。
谢谢！这行得通！但我仍然不明白，为什么我的脚本从不显示带有 a 类的 div。 :(
@mridul，因为 css 选择器中的 , 启动了一个全新的选择器。它没有合并..所以#f:hover ~ .abc,.a 表示#f:hover ~ .abc 和.a。您将其设置为display:none，因此它始终设置为隐藏
谢谢。这行得通。我需要在其中一个页面中从引导程序中隐藏 jumbotron 类。我就是这样做的。

【解决方案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/

【讨论】：

【解决方案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;
}

【讨论】：