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

网络编程 发布日期：2024/10/6 浏览次数：1

正在浏览：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实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法

代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/UploadFiles/2021-04-02/jquery.min.js">


希望本文所述对大家的jquery程序设计有所帮助。
上一篇：在for循环中length值是否需要缓存
下一篇：jQuery实现图片与文字描述左右滑动自动切换的方法

一句话新闻

Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。