jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

本文实例讲述了jQuery实现鼠标经过时高亮，同时其他同级元素变暗的效果。分享给大家供大家参考，具体如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html head meta http-equiv=' content-type ' content=' text/html；charset=utf-8 '/meta name=' keywords ' content='关键词1,关键词2,关键词3等等/title鼠标经过时高亮，其他的暗/title style type=' text/CSS ' * { margin :0；划水：0;} ul、李{列表式：无；} ul { width:900px高度：200 px余量：100px自动} li {宽度：200px高度：200 px显示：内嵌块；border:1px实心# d8d8d8位置：相对；} .addblack { width:200px高度：200 pxdisplay:none背景技术： # 000;filter: alpha(不透明度=10);-莫兹-奥帕市3360 0.1；opacity: 0.1位置：绝对；left:0top:0}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).index _ Img ').悬停(function(){ $(this)).兄弟姐妹()。查找('。添加黑色').show()；}，function(){ $(this).兄弟姐妹()。查找('。添加黑色').hide()；$(这个)。查找('。添加黑色').hide()；})}))/脚本/头体ul li class='index_Img '苹果div class=' addblack ' style=' left : 0px；top: 0px宽度： 200像素；高度： 200像素；显示器：无；/div /li li class='index_Img '香蕉div class=' addblack ' style=' left : 0px；top: 0px宽度： 200像素；高度： 200像素；显示器：无；/div /li li class='index_Img '葡萄div class=' addblack ' style=' left : 0px；top: 0px宽度： 200像素；高度： 200像素；显示器：无；/div /li li class='index_Img '凤梨div class=' addblack ' style=' left : 0px；top: 0px宽度： 200像素；高度： 200像素；显示器：无；/div /li /ul /body/html运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery遍历算法与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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