<!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" 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>