元素的显示与隐藏

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>
最后修改:2021 年 08 月 17 日
如果觉得我的文章对你有用,请随意赞赏