分别用js，和jq写的，写的不好，请大家指正。。。
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> ul,li{ list-style:none} ul{ width:450px;} li{float:left; width:200px; margin:10px 10px 0 0;display:inline; height:100px;} li div{ border:1px solid #ccc; width:198px;height:98px; background:#fff;} li div p{height:20px; overflow:hidden;} li.on{ position:relative;} li.on div{ position:absolute; height:auto;} li.on div p{ height:auto} </style> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#ul li').each(function(index, element) { $(this).hover(function(){ $(this).addClass('on') },function(){ $(this).removeClass('on') }) }); }) </script> <script type="text/javascript"> //window.onload=function(){ // var li=document.getElementById('ul').getElementsByTagName('li') // for(var i=0;i<li.length;i++){ // li.item(i).onmouseover=function(){ // this.className='on' // } // li.item(i).onmouseout=function(){ // this.className='' // } // } //} </script> <ul id="ul"> <li class=""> <div class=""> <p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p> </div> </li> <li class=""> <div class=""> <p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p> </div> </li> <li class=""> <div class=""> <p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p> </div> </li> <li class=""> <div class=""> <p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p> </div> </li> </ul> </body> </html>