元素的显示与隐藏当鼠标经过盒子缓慢显示黑色半透明遮罩

最新推荐文章于 2023-06-28 14:19:25 发布

科院彭于晏

最新推荐文章于 2023-06-28 14:19:25 发布

阅读量637

点赞数

文章标签： vue.js css

本文链接：https://blog.youkuaiyun.com/yanhn123/article/details/124645242

版权

1. display 显示隐藏元素,但是不保留位置

2. visibility 显示隐藏元素,但是保留原来位置

3. overflow 溢出显示隐藏,但是只对于溢出的部分处理

4. opacity 设置盒子的透明度

当鼠标经过div盒子,里面的span盒子缓慢出现

<style>
        div{
            position: relative;
            width: 390px;
            height: 270px;
            background-color: red;

        }
    div:hover span{
            opacity: 1;
    }
    span{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
          width: 390px;
          height: 270px;
          background-color: rgba(0,0,0,.7);  
          transition: all 2s;
          opacity: 0;
    }
    </style>
<body>
    
    <body>
        <div>
            <span></span>
        </div>
    </body>