Mr.coding

stay hungry,stay foolish.

jQuery将悬停效果加到菜单项 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script src="jquery.js"></script>
 7 <script>
 8 $(document).ready(function() {
 9     $("a").hover(
10         function(event){
11             $(this).addClass('hover');
12         },
13         function(){
14             $(this).removeClass('hover');
15         }
16     );
17 });
18 </script>
19 <style>
20     ul{
21     width:200px;    
22     }
23     ul li ul{
24     list-style:none;
25     margin:5px;
26     width:200px;
27 
28     
29     }
30     a{
31     display:block;
32     border-bottom:1px solid #fff;
33     text-decoration:none;
34     background:#00f;
35     color:#fff;
36     padding:0.5em;
37     }
38     li{
39     display:inline;    
40         }
41     .hover{
42     background:#000;    
43         }
44 </style>
45 </head>
46 <ul>
47     <li><a href="#">Development</a></li>
48     <li><a href="#">Books</a></li>
49     <li><a href="#">Programming</a></li>
50     <li><a href="#">DBA</a></li>
51 </ul>
52 <body>
53 </body>
54 </html>

显示效果如下：

这个案例用以复习前面学过的.hover()方法。悬停事件包含两个事件处理函数，一个鼠标指针移到指定元素上时被调用，另一个在鼠标指针离开指定元素时被调用。

posted on 2016-11-27 15:28  Miss.coding  阅读(296)  评论(0)  编辑  收藏  举报

导航