Home > Article > Web Front-end > jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery
本文实例讲述了jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法。分享给大家供大家参考。具体如下：
鼠标滑向当前图片高亮显示，其它图片变灰 这个 网页特效一些商城经常用到比如淘宝，当用户鼠标移到某一个图片时候变亮 周围图片变灰，形成对比增加用户体验
这个jquery特效的原理是：鼠标滑过当前元素，找到他的同辈元素i,并为它加上opacity_bg类，鼠标移出当前元素，到他的同辈元素i,并移除它加上opacity_bg类景
核心js代码如下：
$(document).ready(function(){
$("ul li").hover(function(){
$(this).siblings().find("i").addClass("opacity_bg");
//鼠标滑过当前元素，找到他的同辈元素i,并为它加上opacity_bg类
},function(){
$(this).siblings().find("i").removeClass("opacity_bg");
//鼠标移出当前元素，到他的同辈元素i,并移除它加上opacity_bg类景
})
})
运行效果如下图所示：
代码如下:
jquery聚光灯效果----无效果请刷新
鼠标滑向当前图片高亮显示，其它图片变灰
希望本文所述对大家的jquery程序设计有所帮助。