本文实例讲述了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类景 }) })
运行效果如下图所示:
代码如下:
<!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程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法”评论...