<!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> <p class="pic"> <!-- <p id="mask"></p> --> </p> </body> <script> var pic=document.getelementsbyclassname("pic")[0]; var d=document.createelement("p"); pic.onmouseenter=function(){ // var d=document.createelement("p"); d.id="mask"; pic.appendchild(d); }; pic.onmouseleave=function(){ this.removechild(d); }; </script> </html>
效果图：
以上就是js实现鼠标放到图片上产生遮罩效果的代码案例的详细内容。