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

Question

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

但它永远不会显示div class="a".

.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中的问题是,in 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/