JQuery-Maus-Hover-Navigation Unterstreichen Herausschieben Beispiel-Freigabe-js-Tutorial-php.cn

JQuery-Maus-Hover-Navigation Unterstreichen Herausschieben Beispiel-Freigabe

小云云

Freigeben： 2018-01-29 17:15:56

Original

1310 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Unterstreichungseffekt der JQuery-Maus im Detail vorgestellt. Ich hoffe, dass die Unterstreichung des Menüs einen gewissen Referenzwert hat allen helfen.

Das Beispiel in diesem Artikel teilt den spezifischen Code für den Unterstreichungs-Slide-Out-Effekt der JQuery-Mouseover-Navigation als Referenz. Der spezifische Inhalt ist wie folgt:

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erklärung von CSS3 und Pseudoelementen, um zu erkennen, dass sich die Unterstreichung nach beiden Seiten ausdehnt, wenn die Maus hinein bewegt wird

So entfernen Sie die Unterstreichung von Hyperlinks in HTML. Beispiel

Zusammenfassung der Methoden zum Entfernen der Unterstreichung von Hyperlinks in CSS und HTML

Das obige ist der detaillierte Inhalt vonJQuery-Maus-Hover-Navigation Unterstreichen Herausschieben Beispiel-Freigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!