css3显示隐藏

CSS3 是当前最新的 CSS 规范，它的出现使得网页设计效果更加丰富多彩。其中一个常用功能就是显示隐藏。

CSS3 实现显示隐藏的方式有多种，以下分别介绍。

一、使用 display 属性

display 属性可以控制元素的显示状态，包括：

• none：将元素隐藏掉，同时不占用页面的空间。
• block：将元素显示为块状元素。
• inline：将元素显示为行内元素。
• inline-block：将元素显示为行内块状元素。

通过改变 display 属性的值，可以实现元素的显示和隐藏。例如，以下代码实现了当鼠标悬停在元素上时，显示图片：

img {
  display: none;
}

div:hover img {
  display: block;
}

上面的代码中，将图片的初始 display 属性设为 none，即隐藏起来。然后通过 div:hover img，当鼠标悬停在 div 元素上时，将图片的 display 属性设为 block，即显示出来。

二、使用 visibility 属性

visibility 属性控制元素的可见性，与 display 属性不同的是，设置 visibility 属性为 hidden 还是会占用页面的空间。其取值包括：

• visible：元素可见。
• hidden：元素不可见，但仍占用页面空间。

以下代码实现了当鼠标悬浮在元素上时，显示文本内容：

div {
  visibility: hidden;
}

div:hover {
  visibility: visible;
}

上面的代码中，将 div 元素的初始 visibility 属性设为 hidden，即隐藏起来。然后通过 div:hover，当鼠标悬停在 div 元素上时，将元素的 visibility 属性设为 visible，即显示出来。

三、使用 opacity 属性

opacity 属性控制元素的透明度，其取值范围为 0 到 1，0 表示完全透明，1 表示完全不透明。通过改变元素的 opacity 属性值，可以实现元素的显示和隐藏。例如，以下代码实现了当鼠标悬浮在元素上时，元素淡入淡出的效果：

div {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

div:hover {
  opacity: 1;
}

上面的代码中，将 div 元素的初始 opacity 属性设为 0，即完全透明。然后通过 div:hover，当鼠标悬停在 div 元素上时，将元素的 opacity 属性设为 1，即完全不透明。同时添加了 transition 属性，实现了淡入淡出的效果。