<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0}
ul{float: left;width: 200px}
ul li{background: #ccc;padding: 30px 10px}
.myitems{float: left;width: 500px;height: 300px}
.myitems div{width: 100%;height: 100%;display: none}
.item1{background: #f03}
.item2{background: #6fc}
</style>
</head>
<body>
<ul >
<li>12</li>
<li>123</li>
</ul>
<div class="myitems">
<div class="item1 item"></div>
<div class="item2 item"></div>
</div>
<script>
$(function(){
$("li").mouseenter(function(){
$(".item").hide().eq($(this).index()).show();
}).mouseleave(function(){
console.log("aaa");
$(".item").eq($(this).index()).hide();
})
$(".item").mouseenter(function(){
$(this).show()
}).mouseleave(function(){
$(this).hide()
})
})
</script>
</body>
</html>
