首页 > 代码库 > 鼠标悬浮下划线效果
鼠标悬浮下划线效果
<!doctype html><html><head><meta charset="utf-8"><title>jQuery鼠标悬停导航底部动画效果</title><style>*{ margin:0; padding:0; list-style:none;}img{ border:0;}.header{ width:100%; background:#F5F5F5;}.nav{ width:1000px; margin:0 auto; overflow:hidden;}.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}.nav ul li a{ color:#666; font-family:‘Microsoft Yahei‘; font-size:14px; text-decoration:none;}.nav ul li a:hover{ color:#000; text-decoration:none;}.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#1FAEFF; top:58px; left:50%;}</style><script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript">hQGHuMEAyLn(‘.adsbygoogle,.fdad,.inner > .add‘);</script></head><body><!-- 代码begin --><div class="header"><div class="nav"> <ul> <li><a href=http://www.mamicode.com/‘#‘>首页"jquery-1.7.2.min.js"></script><script>$(function(){ $(‘.nav li‘).hover(function(){ $(‘span‘,this).stop().css(‘height‘,‘2px‘); $(‘span‘,this).animate({ left:‘0‘, width:‘100%‘, right:‘0‘ },200); },function(){ $(‘span‘,this).stop().animate({ left:‘50%‘, width:‘0‘ },200); });});</script><!-- 代码end --></body></html>原链接：http://www.jq22.com/yanshi5753
鼠标悬浮下划线效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。