js实现鼠标移动到图片产生遮罩效果
程序员文章站
2022-07-06 20:32:36
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下
本文实例为大家分享了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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 美食艺术--足够诱人但绝对舍不得吃的食物
下一篇: 【Processing】音画互动小程序