本文实例为大家分享了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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。