本文實例為大家分享了js實現鼠標移動到圖片產生遮罩效果的具體代碼，供大家參考，具體內容如下

mask

.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;

}

var pic=document.getElementsByClassName("pic")[0];

var d=document.createElement("div");

pic.οnmοuseenter=function(){

// var d=document.createElement("div");

d.id="mask";

pic.appendChild(d);

};

pic.οnmοuseleave=function(){

this.removeChild(d);

};

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。