<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } img{ display: block; } .box{ margin: 100px auto; width: 298px; height: 248px; border: 1px solid pink; position: relative; overflow: hidden; } #left{ position: absolute; top: 0; left: 0; border-right: 1px solid pink; } #right{ position: absolute; top: 0; right: 0; border-left: 1px solid pink; } #left a ,#right a{ display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; text-align: center; line-height: 27px; color: black; background: url("images/lili.jpg") repeat-x; } #left a:hover ,#right a:hover{ background: url("images/abg.gif") repeat-x; color: #fff; } #center{ position: absolute; top: 0;left: 49px; } </style> <script> $(function () { $("#left li").mouseenter(function () { $("#center li:eq("+$(this).index()+")").show().siblings().hide(); }) $("#right li").mouseenter(function () { $("#center li:eq("+($(this).index()+9)+")").show().siblings().hide(); }) }) </script> </head> <body> <div class="box"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> </ul> <ul id="center"> <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li> </ul> <ul id="right"> <li><a href="#">女包</a></li> <li><a href="#">男包</a></li> <li><a href="#">登山鞋</a></li> <li><a href="#">皮带</a></li> <li><a href="#">围巾</a></li> <li><a href="#">皮衣</a></li> <li><a href="#">男毛衣</a></li> <li><a href="#">男棉服</a></li> <li><a href="#">男靴</a></li> </ul> </div> </body> </html>
