所以我们学到了三个东西：
1.回顾一次CSS：
定位的时候 记住了！ 绝对定位和相对定位 的参照是谁 特别是绝对定位的参照要注意，是生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
还有就是 pointer-events: none; CSS 的这个属性 他是直接可以忽略事件的发生的！！！ 具体百度吧！！ 但是这个很有必要知道!!!
2.一些jq的动画啊 还有就是 stop 和 finsh 的应用,这些要会用即可,emmmm 还有一下事件,那些也一样要会知道会用即可.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BiHu导航</title> <script src="jqsourse.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } ul { width: 1000px; height: 50px; margin: 30px auto; border-bottom: 3px solid #1fd6be; position: relative; } ul > li { list-style: none; width: 100px; height: 50px; float: left; cursor: pointer; text-align: center; line-height: 50px; } ul > span { width: 100px; height: 50px; position: absolute; text-align: center; line-height: 50px; background-color: #1fd6be; border-bottom: solid red 3px; left: 0; color: #fff; cursor: pointer; /* 不作为事件目标 * 会直接忽略他的事件 */ pointer-events: none; } </style> </head> <body> <ul> <li>首页</li> <li>咨询</li> <li>体育</li> <li>政治</li> <li>本地</li> <li>游戏</li> <li>电子</li> <li>科技</li> <li>经济</li> <li>音乐</li> <span>首页</span> </ul> <script> //鼠标放上去时 我就动画跑起来 $(‘li‘).stop().on(‘mouseover‘,function () { $(‘span‘).animate({ left:$(this).index() * 100 },100,‘linear‘).text($(this).text()); } ); //鼠标点击时 我就打印自己的内容 $(‘li‘).on(‘click‘,function (){ alert($(this).text()) }); //如果离开li的话 那我span我就直接完成到最后那次移动 $(‘li‘).mouseout(function (){ $(‘span‘).finish(); }); </script> </body> </html>
原文：https://www.cnblogs.com/bi-hu/p/14821632.html