jquery survol de la souris navigation soulignement diapositive exemple de partage-js tutoriel-php.cn

jquery survol de la souris navigation soulignement diapositive exemple de partage

小云云

Libérer： 2018-01-29 17:15:56

original

1323 Les gens l'ont consulté

Cet article présente principalement en détail l'effet de soulignement de navigation au survol de la souris jquery. Le soulignement du menu apparaît lorsque la souris survole et s'étend des deux côtés. J'espère que les amis intéressés pourront s'y référer. aider tout le monde.

L'exemple de cet article partage le code spécifique pour l'effet coulissant de soulignement de la navigation au survol de la souris jquery pour votre référence. Le contenu spécifique est le suivant

<.>

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

Copier après la connexion

Recommandations associées :

Explication détaillée du CSS3 et des pseudo-éléments pour se rendre compte que le soulignement s'étend des deux côtés lorsque la souris est déplacée

Comment supprimer le soulignement des hyperliens en html Exemple

Résumé des méthodes pour supprimer le soulignement des hyperliens en CSS et HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!