本文主要为大家详细介绍了jquery鼠标悬停导航下划线滑出效果，菜单鼠标悬停出现下划线，向两边扩展的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体代码，供大家参考，具体内容如下
nbsp;html>jquery鼠标悬停导航下划线滑出效果 *{ 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%;}
登录后复制首页菜单导航时间日期焦点图tab标签jquery特效相册代码图片特效名站特效$(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);});});
相关推荐：
详解css3和伪元素实现鼠标移入时下划线向两边展开
如何去掉html中超链接下划线的实例
CSS和html中超链接去掉下划线的方法总结
以上就是jquery鼠标悬停导航下划线滑出实例分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2788364.html
