光棒效果:
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>
执行结果:
时间： 2024-10-12 08:46:08