有三种方法可以显示隐藏的 CSS 文本:使用 display 属性设置 display 为 inline 或 block使用 visibility 属性设置 visibility 为 visible使用 opacity 属性设置 opacity 为 1

如何显示隐藏的 CSS 文本
方法一:使用显示属性
最直接的方法是使用 display 属性。将隐藏的文本的 display 属性设置为 inline 或 block,即可使其显示。
示例:
html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布,可以通过鼠标前后拖拽图片。当点击图片的标号数字时,隐藏所有的缩略图,在屏幕上显示当前被点击的图片放大,文本内容展示效果。
立即学习“前端免费学习笔记(深入)”;
.hidden {
display: none;
}
.show {
display: block;
}方法二:使用可见性属性
另一个选择是使用 visibility 属性。将隐藏的文本的 visibility 属性设置为 visible,即可使其显示。
示例:
立即学习“前端免费学习笔记(深入)”;
.hidden {
visibility: hidden;
}
.show {
visibility: visible;
}方法三:使用 opacity 属性
opacity 属性可以控制元素的透明度。将隐藏的文本的 opacity 属性设置为 1,即可使其完全显示。
示例:
立即学习“前端免费学习笔记(深入)”;
.hidden {
opacity: 0;
}
.show {
opacity: 1;
}注意:
- 使用
display属性比使用visibility或opacity属性效率更高。 - 如果文本被
overflow隐藏,则上述方法无效。可以使用overflow: visible来解决此问题。









