CSS 可见性

CSS的 visibility 属性允许您在不改变文档布局的情况下显示或隐藏一个元素，而隐藏元素会占据空间。

visibility 属性可以用于创建多种效果，比如隐藏尚未准备好显示的元素，或者隐藏仅与某些用户相关的元素。

visibility 属性可以取以下任意值：

visible - 元素可见。
hidden - 元素隐藏，但仍占据页面上的空间。
collapse - 从表格中删除表格行、列、列组和行组。 collapse 在非表格元素上使用时与 hidden 具有相同的含义。
initial - 将元素的可见性设置为其默认值。
inherit - 从父元素继承可见性属性。

CSS可见性 – 使元素可见

CSS属性 visibility: visible 使元素可见。这是 visibility 属性的默认值。

示例

这是一个示例 –

<html>
<head>
<style>
   h2 {
      visibility: visible;
   }
</style>
</head>
<body>
   <h2>This element will remain visible</h2>
</body>
</html>

CSS可见性 – 隐藏元素

CSS属性 visibility: hidden 将元素隐藏在用户的视图中，但不会从文档布局中移除。

即使元素不可见，仍然可以被屏幕阅读器访问，并且会影响页面的布局。

示例

这是一个例子 –

<html>
<head>
<style>
   .visible {
      visibility: visible;
   }
   .hidden {
      visibility: hidden;
   }
</style>
</head>
<body>
   <h2 class="visible">This element will be visible</h2>
   <h2 class="hidden">This element will be hidden</h2>
</body>
</html>

CSS可见性 – 折叠

为了在不影响表格布局的情况下删除表格的行或列，您可以将行或列的 可见性 属性设置为折叠。此值仅对表格元素有效。

示例

这是一个示例 –

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }
   table {
      border-collapse: collapse;
      color: #ffffff;
      width: 100%;
      background-color: #35DC5A;
      border: 2px solid black;
   }
   th, td {
      border: 2px solid black;
      padding: 8px;
      text-align: left;
      font-size: 20px;
   }
</style>
</head>
<body>
   <table>
      <tr>
         <td>Orange</td>
         <td>Magoes</td>
         <td class="collapse">Carbs</td>
      </tr>
      <tr>
         <td>Banana</td>
         <td>Dates</td>
         <td>Nuts</td>
      </tr>
   </table>
</body>
</html>

CSS可见性 – 在非表格元素上的折叠

以下示例演示了当在非表格元素上设置visibility:collapse时，我们可以看到该属性与visibility:hidden相同：

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }

</style>
</head>
<body>
  <h2>Collapse a Non-Table Elements</h2>
  <h2 class="collapse">1 - You can not see this element</h2>
  <h2>2 - You can see this element</h2>
</body>
</html>

CSS可见性 – 过渡效果

下面例子展示了当鼠标悬停在图片上时，元素如何隐藏：

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }
   img:hover + .hidable {
    visibility: hidden;
  }
</style>
</head>
<body>
  <img src="images/tutimg.png" style="cursor:pointer;" />
  <h2 class="hidable">Hovering over the above image hides me!</h2>
</body>
</html>