实现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程序设计有所帮助。

【实现jQuery鼠标滑向当前图片高亮显示并且其它图片变灰的方法】相关文章：

1.关于jQuery实现高亮显示的方法介绍

2.关于jquery简单图片切换显示效果实现方法介绍

3. jQuery实现网页进度显示插件方法

4.jQuery实现左右图片轮播代码操作方法

5.关于jQuery实现鼠标单击网页文字后在文本框显示的方法介绍

6.用JQuery实现鼠标点击文本框显示隐藏提示文本

7.制作鼠标点击图片显示打散的gif动画效果有哪些

8.jQuery控制元素显示隐藏切换滑动的方法总结