jquery事件处理之图像链接通过悬停追加样式

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         <style type="text/css">
 9             .link {
10                 display: block;
11                 width: 170px;
12                 height: 55px;
13                 background-image: url(baidu1.gif);
14                 background-repeat: no-repeat;
15                 background-position: top left;
16             }
17             
18             .hover {
19                 display: block;
20                 width: 200px;
21                 height: 70px;
22                 background-image: url(baidu2.gif)
23                 background-repeat: no-repeat;
24                 background-position: top left;
25             }
26             
27             .active {
28                 display: block;
29                 width: 170px;
30                 height: 55px;
31                 background-image: url(baidu1.gif);
32                 background-repeat: no-repeat;
33                 background-position: top left;
34             }
35             
36             img {
37                 border: 0;
38             }
39             
40         </style>
41         <script src="jquery-1.5.2.js" type="text/javascript"></script>
42         <script type="text/javascript">
43             $(document).ready(function(){
44                 $('.roll').addClass('link');
45                 $('.roll').hover(
46                     function(){
47                         $(this).addClass('active');
48                     },
49                     function(){
50                         $(this).removeClass('active');
51                     } 
52                 );
53             });
54         </script>
55         <body>
56             <a href="http://baidu.com.cn"><span class="roll"></span></a>
57         </body>
58 </html>

posted on 2017-01-21 22:43 Sharpest 阅读(121) 评论(0) 收藏举报

jquery事件处理之图像链接 通过悬停追加样式

jquery事件处理之图像链接通过悬停追加样式