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

本文实例为大家分享了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);

};

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。