jQuery小案例之鼠标滑过显示对应的精品推荐

先来看一下效果：

代码部分：
html:
分为左中右三部分，三部分均由列表实现。

<div id="container">
		<div id="left">
		<ul id="ul">
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			 //已两个为例，其他省略
		</ul>
	</div>
	<div id="center">
		<ul id="uu">
			<li><a href="#"><img src="images/女靴.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/雪地靴.jpg" width="240" height="240"/></a></li>  
		</ul>
	</div>
	<div id="right">
		<ul id="ul">
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
		</ul>
	</div>
	</div>

css部分：

<style>
		* {
			margin:0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		a {
			text-decoration: none;
			color: #000;
		}
		#container {
			width: 400px;
			height: 300px;
			margin: 100px auto;
		}
		#left, #center, #right {
			float: left;
			width: 50px;
			height: 240px;
			border:1px solid red;
		}
		#center {
			width: 240px;
		}
		#left li, #right li{
			border:1px solid red;
			height: 22px;
			text-align: center;
			line-height: 22px;
		}
		#left li:hover, #right li:hover {
			background: red;
		}
		#center {
			position: relative;
		}
		#