欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery

程序员文章站 2022-04-08 14:40:45
...
本文实例讲述了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聚光灯效果----无效果请刷新

鼠标滑向当前图片高亮显示,其它图片变灰

  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery
  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery
  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery
  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery
  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery
  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery
  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery
  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery

希望本文所述对大家的jquery程序设计有所帮助。