php给视频加图片遮罩层,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("p");

pic.οnmοuseenter=function(){

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

d.id="mask";

pic.appendChild(d);

};

pic.οnmοuseleave=function(){

this.removeChild(d);

};

效果图：