2. 代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery响应鼠标实现p由下向上展开</title> <style type="text/css"> .big{position:relative; width:234px; height:300px; background:#ccc} .show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(.big).hover(function () { $(.show).stop(true,true).animate({height:70px}); }, function () { $(.show).stop(true,true).animate({height:0px}); }); }); </script> </head> <body> <!--灰色的p--> <p class="big"> <!--红色的p--> <p class="show"></p> </p> </body> </html>
原理：
① 首先红色p是通过position:absolute绝对定位的，且通过相对与底部定位，如bottom:0px。
② 底部定位固定，高度变高的时候就向上扩展了。
③ 使用jquery的$().animate()动画方法，控制红色p高度变化。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
node.js+console输出日志文件实例分析
怎样操作jquery实现鼠标滑过商品小图片上显示对应大图片
以上就是怎样使用jquery实现div响应鼠标滑过由下向上展开的详细内容。