鼠標移到導航上面 當前的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>