卡卡網(wǎng)

在前面文章我們介紹了可以通過使用clip-path隱藏元素，本文將繼續(xù)介紹另一種CSS隱藏元素的方法：使用visibility。

實(shí)例

demodownload

HTML

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

<p>鼠標(biāo)移到任何一個盒子上隱藏盒子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屬性可以設(shè)置為visible或hidden顯示和隱藏元素。

除非使用collapse值，否則元素使用的空間保持不變。

visibility 屬性

visibility的屬性允許你從視圖中隱藏元素。你可以將此屬性與 JavaScript 一起使用來創(chuàng)建非常復(fù)雜的菜單和非常復(fù)雜的網(wǎng)頁布局。

你可以選擇使用visibility屬性來隱藏僅在用戶需要查看時才顯示的錯誤消息，或者在用戶選擇選項(xiàng)之前隱藏測驗(yàn)的答案。

注意，請記住，源代碼仍將包含不可見段落中的任何內(nèi)容，因此你不應(yīng)使用它來隱藏敏感信息。

句法

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+

相關(guān)文章

• 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()

標(biāo)簽: css  CSS隱藏元素  visibility