欢迎使用CSDN-markdown编辑器

练习：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();
     })