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 属性，实现了淡入淡出的效果。
以上就是几种使用 CSS3 实现显示隐藏的方式，可以根据需求选择。值得注意的是，CSS3 对一些旧版本的浏览器不兼容，因此在编写代码时要考虑到兼容性问题。
