/*1 (display)显示-block/inline/inline-block, 隐藏-none, 不保留位置*/
display: block;
/*2 (visibility)可视化, hidden-隐藏, visible-可视, 保留位置*/
visibility: hidden;
visibility: visible;
/*3 (opacity)透明度设置(位置一直都在)*/
opacity: 0;
1.visibility属性
visibility, 常用方法, 在css样式中可先设置visibility: hidden; 隐藏标签, 再用伪类选择器hover去设置visibility: visible; 显示隐藏的内容 (visibility方法会保留原标签的文档流位置)
推荐使用!!!
2.opacity属性
opacity, 本意是用来设置透明度, 当设置为opacity: 0; 时, 也具有隐藏标签效果, 同样, 在伪类选择器hover中设置opacity: 1; 时则可以显示出所隐藏的内容 (opacity方法可以理解为完全透明化, 同样保留原标签位置)
一般推荐!
3.display属性
display属性, 本意为设置标签为行–块元素, 但当取display: none; 时, 原有的标签则会消失, 后面同样可以用hover伪类选择器去设置display: block/inline/inline-block; 去完成 隐藏–显示效果 (因为display: none; 是完全消除标签, 更像删除, 所以设为none时不能保留原有标签位置)
慎用!!
/*这里用了visibility属性, 注释里是display属性*/
.hidden {
position: absolute;
width: 400px;
height: 222px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 5% 5% 0 0;
top: 0px;
left: 0px;
/*display: none;*/
visibility: hidden;
}
.hidden h1 {
text-align: center;
margin-top: 80px;
color: white;
}
/*致命点*/
.content:hover .hidden{
/*display: block;*/
visibility: visible;
}