实现代码：
HTML：
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>天猫女装频道侧边栏效果</title> </head> <body> <div id="box"> <ul> <li> <div class="img_box"> <div class="img_1"></div> <div class="img_2"></div> </div> <div class="img_title coral"> <div> <p><span>1111</span></p> <p style="top:20px;"><span>2222</span></p> </div> </div> </li> <li> <div class="img_box"> <div class="img_3"></div> <div class="img_4"></div> </div> <div class="img_title crimson"> <div> <p><span>1111</span></p> <p style="top:20px;"><span>2222</span></p> </div> </div> </li> <li> <div class="img_box"> <div class="img_5"></div> <div class="img_6"></div> </div> <div class="img_title darkorchid"> <div> <p><span>1111</span></p> <p style="top:20px;"><span>2222</span></p> </div> </div> </li> </ul> </div> </body> </html>
CSS:
<style> *{margin: 0px;padding: 0px;} body{font-size: 12px;padding: 100px;background-color: #eee;} li{list-style: none;} #box{} #box ul{width: 152px;padding: 0 5px 5px;border: 1px solid #ccc;} #box ul li{position: relative;height: 150px;width: 150px;margin-top: 5px;overflow: hidden;} #box .img_box{position: absolute;left: 0;top: 0;width: 300px;} #box .img_box div{width: 150px;height: 150px;float: left;} #box .img_box .img_1{background-color: #1e90ff;} #box .img_box .img_2{background-color: #7b68ee;} #box .img_box .img_3{background-color: #ff4500;} #box .img_box .img_4{background-color: #c71585;} #box .img_box .img_5{background-color: #9acd32;} #box .img_box .img_6{background-color: #008080;} #box .img_title{width: 150px;height: 40px;position: absolute;bottom: -20px;left: 0;} #box .img_title div{position: relative;top: 0;left: 0;} #box .img_title p{width: 150px;height: 20px;line-height: 20px;color: #fff;padding-left: 5px;position: absolute;left: 0;} #box .img_title span{font-weight: bold;} #box .coral p{background-color: #20b2aa;} #box .crimson p{background-color: #7b68ee;} #box .darkorchid p{background-color: #ff4500;} </style>
JS：
<script src="jQuery.js"></script> <!-- 引用了jQuery --> <script> $(function(){ $('#box li').hover(function(){ $(this).find('.img_box').stop().animate({left:'-150px'},'450'); $(this).find('p').eq(0).stop().animate({top:'20px'},'450'); $(this).find('p').eq(1).stop().animate({top:'0'},'450'); },function(){ $(this).find('.img_box').stop().animate({left:'0'},'450'); $(this).find('p').eq(0).stop().animate({top:'0'},'450'); $(this).find('p').eq(1).stop().animate({top:'20px'},'450'); }); }); </script>
效果图如下所示：
鼠标经过色块的时候色块变换的同时下面的描述文字也变换。