JQuery 实现鼠标经过图片高亮显示，其余图片变暗

最新推荐文章于 2021-06-06 16:25:56 发布

weixin_30752377

最新推荐文章于 2021-06-06 16:25:56 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/selinamee/p/3572008.html

本文介绍了一种网页图片展示效果的实现方式，当鼠标悬停在某张图片上时，该图片保持正常显示，而其他图片则变暗。此效果通过CSS设置遮罩透明度配合JQuery的hover事件及fadeTo方法实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

当鼠标经过图片时，其余图片变暗，来高亮显示当前图片，主要用的是对比度。当然你也可以先把其他图片默认变暗，鼠标经过时高亮显示，不过，无鼠标经过时整体图片都会是偏暗色调。

效果可以通过三步实现：

1、排列图片

图片位置：DIV+CSS

2、添加遮罩

遮罩设置+透明度设置： CSS

 filter:alpha(opacity=30);  /* IE 浏览器支持 */ ;
 -moz-opacity:0.3;          /* 遨游浏览器 火狐浏览器 支持 */ ;
 opacity: 0.3;              /* 支持CSS3的浏览器（FF 1.5也支持）*/”>

3、鼠标事件

鼠标经过hover 事件：JQuery

当图片有多张时，鼠标滑动到某一张图片，其他所有图片的透明度都要变暗，这就需要通过JQuery 的 siblings() 方法来遍历所有图片元素，使用 fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值，达到整体变暗，局部高亮的效果。

$(this).hover(function() {
$(this).siblings().find(".display").stop();      //找到当前元素的后代，筛选出 class 为 display 的元素，停止活动
$(this).siblings().find(".display").fadeTo("fast",0.3);   //让当前元素的后代中class为display的元素的透明度变为0.3

}

效果图源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="style/jquery-1.4.2.min.js"></script>
<style type="text/css">
.pos_abs{position:absolute;}
.pic{position:absolute;}
.display  {position:absolute;background:#000;opacity:0;filter:alpha(opacity=0);}
.m1 {left:0;top:0;width:480px;height:360px;}
.m2 {left:0;top:0;width:300px;height:150px;}
.m3 {left:490px;top:150px;width:300px;height:210px;}
</style>
<script>
$(function() {
$(".pic").find("a").each(function() {
$(this).hover(function() {
$(this).siblings().find(".display").stop();
$(this).siblings().find(".display").fadeTo("fast",0.3);
},
function() {
$(this).siblings().find(".display").stop();
$(this).siblings().find(".display").fadeTo("fast",0);
});
});
})
</script>
</head>
<body>
<div class="pic">
<a href="#" ><img src="images/4.jpg" /><div class="display m1"></div></a>
<a href="#" class="pos_abs"><img src="images/2.jpg" /><div class="display m2"></div></a>
<a href="#" ><img src="images/3.jpg" /><div class="display m3"></div></a>
</div>
</body>
</html>