卡卡网

在前面文章我们介绍了可以通过使用clip-path隐藏元素，本文将继续介绍另一种CSS隐藏元素的方法：使用visibility。

实例

demodownload

HTML

<ol class="hide" tabindex="0">
  <li>one</li>
  <li class="hide-item">two</li>
  <li>three</li>
</ol>

<p>鼠标移到任何一个盒子上隐藏盒子two，<br>使用 <b>visibility: hidden;</b>。</p>

CSS

/* hide element */
.hide:hover .hide-item,
.hide:focus .hide-item {
  visibility: hidden;
}

/* other styles */
body {
  font-family: sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fff;
}

p {
  text-align: center;
}

.hide {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hide > * {
  flex: 0 0 25%;
  font-size: 2em;
  text-align: center;
  padding: 1em 0;
  margin: 0.2em;
  background-color: #ccc;
  border-radius: 0.5em;
  user-select: none;
}

.hide-item {
  background-color: #f66;
  cursor: pointer;
}

代码解释

visibility属性可以设置为visible或hidden显示和隐藏元素。

除非使用collapse值，否则元素使用的空间保持不变。

visibility 属性

visibility的属性允许你从视图中隐藏元素。你可以将此属性与 JavaScript 一起使用来创建非常复杂的菜单和非常复杂的网页布局。

你可以选择使用visibility属性来隐藏仅在用户需要查看时才显示的错误消息，或者在用户选择选项之前隐藏测验的答案。

注意，请记住，源代码仍将包含不可见段落中的任何内容，因此你不应使用它来隐藏敏感信息。

句法

visibility: visible|hidden|collapse|initial|inherit;

visibility属性可以采用下表中列出的值。

浏览器支持

很好，几乎支持所有浏览器。

• Google Chrome 1.0+
• Edge 12.0+
• Internet Explorer 4.0+
• Firefox 1.0+
• Opera 4.0+
• Safari 1.0+

相关文章

• CSS隐藏元素的10种方法之：缩小尺寸
• CSS隐藏元素的10种方法之：使用::after伪元素
• CSS隐藏元素的10种方法之：使用position属性
• CSS隐藏元素的10种方法之：使用display
• CSS隐藏元素的10种方法之：使用visibility
• CSS隐藏元素的10种方法之：使用clip-path
• CSS隐藏元素的10种方法之：使用transform
• CSS隐藏元素的10种方法之：color Alpha 透明度
• CSS隐藏元素的10种方法之：opacity和filter: opacity()

标签: css  CSS隐藏元素  visibility