js实现鼠标移动到图片产生遮罩效果

2019-11-19 15:07:11

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码，供大家参考，具体内容如下

<!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>

效果图：