鼠标移到导航上面当前的LI变色处于当前的位置

最新推荐文章于 2026-06-18 14:51:39 发布

转载最新推荐文章于 2026-06-18 14:51:39 发布 · 400 阅读

标签

#javascript #ViewUI

本文介绍了一种使用HTML和JavaScript实现的鼠标悬停时导航条当前项变色的效果。通过简单的CSS样式调整和jQuery事件处理，使得网页导航更加直观且易于使用。

鼠标移到导航上面当前的LI变色处于当前的位置，广泛应用于当前导航。

点击这里查看效果

以下是源代码：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf8">
 4 <title>鼠标移到导航上面 当前的LI变色 处于当前的位置-柯乐义</title>
 5 <style type="text/css">
 6 ul,li{list-style:none;}
 7 #nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;float:left;}
 8 #nav li.h_nav_over{background:red;color:#fff;}
 9 #nav li.h_nav_over a{color:#fff;}
10 a{text-decoration:none;}
11 
12 </style>
13 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
14 
15 <script type="text/javascript">
16 $(function(){
17 $("#nav>ul>li").mouseover(function(){
18         $("#nav>ul>li").each(function(i){
19             $(this).removeClass("h_nav_over");
20         });
21         $(this).addClass("h_nav_over");
22     }).mouseout(function(){
23         $(this).addClass("h_nav_over");
24     });
25 });
26 </script>
27 
28 </head>
29 <body>
30 <div id="nav">
31      <ul>
32         <li><a  href="http://keleyi.com" >首页</a></li><li><a  href="http://keleyi.com/a/bjac/2208fcb8.htm" >品牌商机</a></li>
33         <li><a  href="http://keleyi.com/a/bjac/ec2s9a4n.htm" >精品商机</a></li><li><a  href="http://keleyi.com/a/bjac/m9p0je8s.htm" >最新商机</a></li>
34         <li><a  href="http://keleyi.com/a/bjac/iphgrtqm.htm" >投资考察会</a></li><li><a  href="http://keleyi.com/a/bjac/kjsrt3b0.htm" >在线交流区</a></li>
35      </ul>
36 </div>
37 </body>
38 </html>