先放效果图：
百度云下载地址：http://pan.baidu.com/s/1dDpn1Sl
代码如下：
<!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" /> <title>jquery hover鼠标滑过图片背景高亮闪烁</title> <!--<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> --> <script src="js/jquery.1.4.2-min.js"></script> </head> <body> <div class="headeline"></div> <!--演示内容开始--> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoration:none;} body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";} /* box */ .box{width:480px;height:460px;overflow:hidden;margin:20px auto 0 auto;} .box li{float:left;width:155px;margin:0 4px 7px 0;display:inline;} .box li a{position:relative;height:104px;display:block;overflow:hidden;cursor:pointer;} .box li a .title{z-index:2;position:absolute;bottom:10px;left:-160px;width:150px;height:20px;padding:0 0 0 10px;line-height:20px;color:#000;font-size:20px;} .box li a .shine{z-index:3;position:absolute;top:0;left:0;width:160px;height:104px;background:url(images/shine_brands.png) no-repeat -160px 0;} </style> <div class="box"> <ul> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"> </span></a></li> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li> <li><a href=""><img src="images/01.jpg"/><span class="title">Prada</span><span class="shine"></span></a></li> </ul> </div><!--box end--> <script type="text/javascript"> $(document).ready(function(){ $(".box li a").hover(function(){ var shine = $(this).find(".shine"); var title = $(this).find(".title"); shine.stop().css("backgroundPosition","-160px 0"); shine.animate({backgroundPosition: '160px 0'},500); title.stop().animate({left:'0px'},{queue:false,duration:450}); }, function(){ $(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200}); }); }); </script> </body> </html>