【js基础】鼠标移到图片上产生遮障效果

来源：互联网发布：谜踪之国全文解密知乎编辑：程序博客网时间：2024/05/29 10:54

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>mask</title><style>    .pic{        width:300px;        height:250px;        background:url(icon/product1.jpg) no-repeat;        margin:40px auto;    }    #mask{        width:300px;        height:250px;        background-color: gray;        margin:40px auto;        opacity: 0.5;        z-index: 1000;    }</style>    </head><body>    <div class="pic">        <!-- <div id="mask"></div> -->    </div></body><script>    var pic=document.getElementsByClassName("pic")[0];    var d=document.createElement("div");    pic.onmouseenter=function(){        // var d=document.createElement("div");        d.id="mask";        pic.appendChild(d);    };    pic.onmouseleave=function(){        this.removeChild(d);    };  </script></html>

这里写图片描述

阅读全文

0 0