jquery事件处理之随着鼠标悬停效果

 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>
posted on 2017-01-21 22:06 Sharpest 阅读(278) 评论(0) 收藏举报