1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>事件处理之随着鼠标悬停效果</title> 8 <!--cursor 属性规定要显示的光标的类型(形状)。 --> 9 <style type="text/css"> 10 .buttons { 11 width: 100px; 12 float: left; 13 text-align: center; 14 margin: 5px; 15 border: 1px solid; 16 font-weight: bold; 17 } 18 .hover { 19 cursor: pointer; 20 color: blue; 21 background-color:#008000; 22 } 23 </style> 24 <script src="jquery-1.5.2.js" type="text/javascript"></script> 25 <script type="text/javascript"> 26 $(document).ready(function(){ 27 /* 28 * .hover(handler1, handler2) 29 * handler1指定鼠标进入元素时执行的函数 30 * handler2指定鼠标离开元素时执行的函数 31 */ 32 $('.buttons').hover( 33 function(){ 34 $(this).addClass('hover'); 35 }, 36 function(){ 37 $(this).removeClass('hover'); 38 } 39 ); 40 }); 41 42 </script> 43 <body> 44 <span class="bold buttons">Bold Button</span> 45 <span class="italic buttons">Italic Button</span> 46 </body> 47 </html>