<!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>Document</title>
<style type="text/css">
*{margin:0;padding:0;list-style: none;}
img{display:block;}
body{background: #000;}
li{float:left;margin:0 10px 10px 0;height:186px;width: 200px;}
div{position: relative;padding:10px 0 0 10px; width: 630px;height: 392px;margin:100px auto;border: 1px solid #fff;}
.ul01 li{cursor:pointer;}
.ul01{width: 630px;height: 392px;}
.ul02{border:0 none;position: absolute;left:10px;top:10px;}
.ul02 li{background: red; display:none;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".ul01 li").mouseenter(function(event) {
$(".ul02 li").eq($(this).index()).fadeOut().siblings().fadeTo(300,0.5)
});
$(".ul01 li").mouseleave(function(event) {
$(".ul02 li").stop().fadeOut()
});
$(".ul01 li").click(function(event) {
$(this).children('img').slideUp()
$(this).children('img').slideDown()
});
})
</script></head>
<body>
<div>
<ul class="ul01">
<li>
<img src="fade/01.jpg" height="186" width="200" alt="" />
</li>
<li>
<img src="fade/02.jpg" height="186" width="200" alt="" />
</li>
<li >
<img src="fade/03.jpg" height="186" width="200" alt="" />
</li>
<li >
<img src="fade/04.jpg" height="186" width="200" alt="" />
</li>
<li>
<img src="fade/05.jpg" height="186" width="200" alt="" />
</li>
<li>
<img src="fade/06.jpg" height="186" width="200" alt="" />
</li>
</ul>
<ul class="ul02">
<li>盒子1</li>
<li class="li01">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
ul02是绝对定位 处于ul01之上的，鼠标移入只能移到ul01 而不能选中ul02