土豆网鼠标经过显示遮罩---pink老师课程案例

不要在意我的图片，主要是巩固显示隐藏


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`
    , initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .tudou {
            position: relative;
            margin: 70px auto;
            width: 360px;
            height: 260px;
            background-color: hotpink;
        }
 
        .tudou img {
            width: 360px;
            height: 260px;
        }
 
        .mask {
            /*隐藏遮罩层*/
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6) url(./image/play.png) no-repeat center;
        }
 
        /*当我们鼠标经过tudou这个盒子，就让遮罩层出来*/
        .tudou:hover .mask {
            display: block;
        }
    style>
head>
 
<body>
    <div class="tudou">
        <div class="mask">div>
        <img src="./image/erji.png" alt="">
 
    div>
body>
 
html>

相关阅读:
找到一个超级神奇，百试百灵的解决 ModuleNotFoundError: No module named xxx 的方法
Enzo丨Enzo 抗原回收试剂，pH 6方案
java毕业设计物资租赁管理系统mybatis+源码+调试部署+系统+数据库+lw
【算法与数据结构】--算法应用--算法在实际问题中的应用
240. 搜索二维矩阵 II Python
Java 基础进程与线程
自定义注解实现多数据源+实现原理分析_02
VBA 编程基础
git 更换远程地址的方法
数据结构:二叉树的非递归遍历

原文地址：https://blog.csdn.net/YuKing_HONG/article/details/127736171