jquery鼠标移上图片变暗

最新推荐文章于 2021-01-14 02:09:43 发布

原创最新推荐文章于 2021-01-14 02:09:43 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #js #图片变暗

div+css 专栏收录该内容

89 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的图片悬停显示半透明遮罩的效果。通过为图片元素添加特定的CSS样式，并利用jQuery的hover事件实现鼠标悬停时显示遮罩层的功能。此方法适用于网页中需要增强用户体验的图片展示场景。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hover</title>
<script src="jquery.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
.box li{ width:300px; height:200px; position:relative; float:left;}
.box li a img{width:300px; height:200px;}
.mask{ position:absolute; left:0; top:0; width:300px; height:200px; background:#000; filter:alpha(opacity=60); opacity:0.6; }
</style>
<script type="text/javascript">
$(document).ready(function(){
/*$(".box li a").each(function(){
 	$(this).hover(
	function(){
	   var $items = $(".box li a");
	   t = setInterval(function(){
			  $items.find("div").addClass("mask");
	   },300);
	 },function(){
		clearInterval(t);
		$(this).find("div").removeClass("mask");
	})
});*/
$(".box li a").mask();        
})

$.fn.mask = function(){  
    var items = $(this);  
    $.each(items, function(index, item){  
        $(item).hover(function(){  
            $(this).find("div").addClass("mask");  
        }, function(){  
            $(this).find("div").removeClass("mask");  
        });  
    });  
};
</script>
</head>

<body>
	<div class="box">
    	<ul>
        	<li><a href="#" class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
            <li><a href="#" class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
            <li><a href="#" class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
            <li><a href="#" class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
        </ul>
    </div>

</body>
</html>