光棒效果:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>New Web Project</title> 7 <style type="text/css"> 8 .heightlight{ 9 background-color:red; 10 } 11 </style> 12 <script type="text/javascript" src="js/jQuery1.11.1.js"></script> 13 <script type="text/javascript"> 14 $(document).ready(function(){ 15 $("#nav li").mouseover(function(){ //当鼠标指针移过#nav li 元素时 16 $(this).addClass("heightlight"); //当鼠标指针所在li元素添加样式 17 }); 18 $("#nav li").mouseout(function(){ //当鼠标指针移出#nav li 元素时 19 $(this).removeClass(); //移除鼠标指针所在li元素的全部样式 20 }); 21 }); 22 23 </script> 24 </head> 25 <body> 26 <div id="nav"> 27 <li><a href="#">首页</a></li> 28 <li><a href="#">服装城</a></li> 29 <li><a href="#">电器城</a></li> 30 <li><a href="#">易购超市</a></li> 31 <li><a href="#">易购团</a></li> 32 <li><a href="#">在线游戏</a></li> 33 34 </div> 35 </body> 36 </html>
执行结果:
