js实现鼠标移动到图片产生遮罩效果
更新时间：2017年10月21日 09:29:59 作者：数星星的咚咚咚
这篇文章主要为大家详细介绍了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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js中split和replace的用法,实例分析了split和replace的功能及使用技巧,需要的朋友可以参考下2015-02-02
Blob常用于处理文件数据、图像数据、音频数据,本文主要介绍了JavaScript中URL和Blob的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
这篇文章主要介绍了WebView启动支付宝客户端支付失败的问题小结的相关资料,需要的朋友可以参考下2017-01-01
在JavaScript中for循环是同步的,意味着每个循环都会等待前一个循环的请求完成后才会执行下一个循环,这篇文章主要给大家介绍了关于JS多次请求接口按顺序依次执行的解决办法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了JS ES6中的解构，对解构感兴趣的同学，可以参考下2021-04-04
近，在客户端解吸xml时候，需要将XML转化成字符串，看了很多文章，介绍的最多的是将XML字符串转化成对象2011-12-12
javascript中$(function() {});写与不写有哪些区别
javascript中$(function() {....}) 是jQuery中的经典用法，等同于 $(document).ready(function() {....}) javascript中$(function() {});写与不写有哪些区别，需要的朋友可以参考下2015-08-08
indexOf是在一个字符串中寻找一个字的位置，lastIndexOf 也是找字 , 它们俩的区别是前者从字符串头开始找，后者是从字符串末端开始找2014-09-09
这篇文章主要介绍了基于js实现复制内容到操作系统粘贴板过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了JS如何动态增加删除UL节点LI及相关内容,需要的朋友可以参考下2014-05-05
最新评论