css3显示隐藏

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

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

一、使用 display 属性

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

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

立即学习“前端免费学习笔记（深入）”；

img {  display: none;}div:hover img {  display: block;}

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

二、使用 visibility 属性

visibility 属性控制元素的可见性，与 display 属性不同的是，设置 visibility 属性为 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 属性，实现了淡入淡出的效果。