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

 
  <!DOCTYPE html PUBLIC  
  "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-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; 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" 
  src= 
  "jquery-1.7.2.min.js" 
  ></script> 
 
  <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>