元素的显示与隐藏
display属性
display：none 此元素不会被显示。
display：block 此元素将显示为块级元素，此元素前后会带有换行符。
display隐藏元素后，不占有原有位置
visibility 属性
visibility：visible 默认值。元素是可见的。
visibility：hidden 元素是不可见的。
visibility隐藏元素后，保留原有位置
overflow 属性
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
案列
鼠标经过显示蒙版及图标
<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>声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
