jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Posted 山涧清泉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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; padding:0;} ul,li{list-style:none;} ul{width:900px; height:200px; margin:100px auto;} li{width:200px; height:200px; display:inline-block; border:1px solid #d8d8d8; position:relative;} .addblack{width:200px; height:200px; display:none; background:#000;filter: alpha(opacity=10);-moz-opacity: 0.1; opacity: 0.1; position:absolute; left:0; top:0;} </style> <script type="text/javascript"> $(document).ready(function(){ $(".index_Img").hover(function(){ $(this).siblings().find(".addblack").show(); },function(){ $(this).siblings().find(".addblack").hide(); $(this).find(".addblack").hide(); }) }) </script> </head> <body> <ul> <li class="index_Img"> 苹果 <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div> </li> <li class="index_Img"> 香蕉 <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div> </li> <li class="index_Img"> 葡萄 <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div> </li> <li class="index_Img"> 凤梨 <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div> </li> </ul> </body></html>以上是关于jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果的主要内容，如果未能解决你的问题，请参考以下文章