效果体验：
http://keleyi.com/keleyi/phtml/jqtexiao/39.htm
HTML文件代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义</title><base target="_blank" /> <link href="http://keleyi.com/keleyi/phtml/jqtexiao/39/hovertreedaohang.css" rel="stylesheet" type="text/css" /> <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script> $(document).ready(function() { $("#hovertreecaidan li a").wrapInner( '<span class="out"></span>' ); $("#hovertreecaidan li a").each(function() { $( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this ); }); $("#hovertreecaidan li a").hover(function() { $(".out", this).stop().animate({'top': '48px'}, 300); // move down - hide $(".over", this).stop().animate({'top': '0px'}, 300); // move down - show }, function() { $(".out", this).stop().animate({'top': '0px'}, 300); // move up - show $(".over", this).stop().animate({'top': '-48px'}, 300); // move up - hide }); }); </script> </head> <body> <div id="hovertreecaidan" class="hovertreedaohang"> <ul> <li><a href="http://keleyi.com">首 页</a></li> <li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li> <li><a href="http://keleyi.com/menu/webqd/">Web前端</a></li> <li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li> <li><a href="http://keleyi.com/menu/html5/">HTML5</a></li> <li><a href="http://hovertree.com/">HoverTree</a></li> <li><a href="http://hovertree.com/texiao/">网页特效</a></li> <li><a href="http://tool.keleyi.com/">工具</a></li> <li><a href="http://hovertree.com/guestbook/">留言</a></li> </ul> <div class="hvtclear"></div> </div> </body> </html>
其中jQuery的wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。