元素的显示与隐藏
display属性
display：none 此元素不会被显示。 display：block 此元素将显示为块级元素，此元素前后会带有换行符。
display隐藏元素后，不占有原有位置
visibility 属性
visibility：visible 默认值。元素是可见的。 visibility：hidden 元素是不可见的。
visibility隐藏元素后，保留原有位置
overflow 属性
visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
案列
鼠标经过显示蒙版及图标
代码语言：javascript复制
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, .3) url(bf.jpg) no-repeat center;
}
.tudou:hover .mask{
display: block;
}
</style>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="tb.png" />
</div>
</body>
