元素的显示与隐藏
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>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。