css练习——土豆视频遮罩

飞天小女侠~

已于 2022-03-29 09:38:33 修改

阅读量320

点赞数

分类专栏：前端案例练习文章标签： css3 前端 css

于 2022-03-09 14:34:04 首次发布

本文链接：https://blog.csdn.net/xuan971130/article/details/123376958

版权

CSS 遮罩层鼠标悬停绝对定位伪元素

关键词由CSDN通过智能技术生成

前端案例练习专栏收录该内容

29 篇文章 2 订阅

订阅专栏

效果：鼠标经过时显示遮罩层

复习：遮罩层用绝对定位，不占有位置。因此外面的.box用相对定位。

代码：用css实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土豆视频显示案例</title>
    <style>
        .box {
            position: relative;
            margin: 0 auto;
            width: 400px;
            height: 270px;
            border: 1px solid red;
        }
        img {
            
            width: 100%;
            height: 100%;
        }
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3) url(images/tudou.png) no-repeat;
        }
        /* 不能直接写 .mask:hover,因为默认是不显示的，所以点不到它。因此可以写成，鼠标到box以后，让其子元素mask显示。 */
        .box:hover .mask{ 
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="mask"></div>
        <img src="../../js/images/bg1.jpg" alt="">
    </div>
</body>
</html>

代码：用伪类选择实现。

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土豆视频显示案例</title>
    <style>
        .box {
            position: relative;
            margin: 0 auto;
            width: 400px;
            height: 270px;
            border: 1px solid red;
        }
        img {
            
            width: 100%;
            height: 100%;
        }
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3) url(images/tudou.png) no-repeat;
        }
        /* 不能直接写 .mask:hover,因为默认是不显示的，所以点不到它。因此可以写成，鼠标到box以后，让其子元素mask显示。 */
        .box:hover .mask{ 
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="mask"></div>
        <img src="../../js/images/bg1.jpg" alt="">
    </div>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土豆视频显示案例</title>
    <style>
        .box {
            position: relative;
            margin: 0 auto;
            width: 400px;
            height: 270px;
            border: 1px solid red;
        }
        img {
            
            width: 100%;
            height: 100%;
        }
        /* 用伪元素的方式来写 */
        .box:hover::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3) url(images/tudou.png) no-repeat;
        }
    

    </style>
</head>

<body>
    <div class="box">
        <img src="../../js/images/bg1.jpg" alt="">
    </div>
</body>
</html>

飞天小女侠~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css练习——土豆视频遮罩

效果：鼠标经过时显示遮罩层复习：遮罩层用绝对定位，不占有位置。因此外面的.box用相对定位。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi.
复制链接

扫一扫

专栏目录