Example to explain jquery mouse hover navigation underline slide-out effect-JS Tutorial-php.cn

Example to explain jquery mouse hover navigation underline slide-out effect

小云云

Release： 2017-12-27 09:49:55

Original

1365 people have browsed it

This article mainly introduces in detail the underline slide-out effect of jquery mouse hover navigation. The underline appears when the menu mouse hovers and expands to both sides. It has certain reference value. Interested friends can refer to it. I hope Can help everyone.

The example in this article shares the specific code for the underline slide-out effect of jquery mouse hover navigation for your reference. The specific content is as follows

<!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:&#39;Microsoft Yahei&#39;; 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>
</head>
<body>
<p class="header">
<p class="nav">
<ul>
<li><a>首页</a><span></span></li>
<li><a>菜单导航</a><span></span></li>
<li><a>时间日期</a><span></span></li>
<li><a>焦点图</a><span></span></li>
<li><a>tab标签</a><span></span></li>
<li><a>jquery特效</a><span></span></li>
<li><a>相册代码</a><span></span></li>
<li><a>图片特效</a><span></span></li>
<li><a>名站特效</a><span></span></li>
</ul>
</p>
</p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$(&#39;.nav li&#39;).hover(function(){
$(&#39;span&#39;,this).stop().css(&#39;height&#39;,&#39;2px&#39;);
$(&#39;span&#39;,this).animate({
left:&#39;0&#39;,
width:&#39;100%&#39;,
right:&#39;0&#39;
},200);
},function(){
$(&#39;span&#39;,this).stop().animate({
left:&#39;50%&#39;,
width:&#39;0&#39;
},200);
});
});
</script>
</body>
</html>

Copy after login

Related recommendations ：

Detailed explanation on the use of jQuery mouse hover event.hover()

What jQuery mouse events are

Instance code of hidden layer based on jquery mouse click elsewhere_jquery

The above is the detailed content of Example to explain jquery mouse hover navigation underline slide-out effect. For more information, please follow other related articles on the PHP Chinese website!