练习:7.鼠标移入显示相应文字,移出隐藏
HTML:
<ul>
<li>我是li 1</li>
<li>我是li 2</li>
<li>我是li 3</li>
</ul>
<div class="content">
<div>我是我是li 1的div</div>
<div>我是我是li 2的div</div>
<div>我是我是li 3的div</div>
</div>
css:
li{margin-bottom:20px;padding:20px;width:150px;height:10px;border:1px solid #ccc;}
.content{float:left;border: 1px ridge saddlebrown}
.content div{padding:20px;width:800px;height:200px;border:1px solid #ccc;}
js:
$('.content div').hide();
$('li').hover(function(){
$('.content').find('div').eq($(this).index()).show();//find():后代选择器、index():下标为0的元素
},function(){
$('.content').find('div').eq($(this).index()).hide();
})
$('.content div').hover(function(){
$(this).show();
},function(){
$(this).hide();
})