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()方法。悬停事件包含两个事件处理函数，一个鼠标指针移到指定元素上时被调用，另一个在鼠标指针离开指定元素时被调用。