jquery的鼠标悬停时放大图标本身除了利用插件还可以利用CSS样式调整

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             /*
10              *.small {
11              *    text-align: center;    /*该属性对FF和IE都有效*/
12             .small {
13                 position:relative;
14                 margin: auto;
15                 text-align: center;
16             }
17             
18             a {
19                 text-decoration: none;
20                 outline: none;
21             }
22             img {
23                 border: 0;
24                 width: 90px;
25                 height: 90px;
26             }
27         </style>
28         <script src="jquery-1.5.2.js" type="text/javascript"></script>
29         <script type="text/javascript">
30             $(document).ready(function(){
31                 $('img').hover(
32                     function(){
33                         $(this).css({width:120,height:120});
34                     },
35                     function(){
36                         $(this).css({width:90,height:90});
37                     }
38                 );
39             });
40         </script>
41     </head>
42     <body>
43         <div id="bar">
44             <div class="small">
45                 <a href="#"><img src="1.jpg" /></a>
46                 <a href="#"><img src="2.jpg" /></a>
47                 <a href="#"><img src="3.jpg" /></a>
48             </div>
49         </div>
50     </body>
51 </html>

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

jquery的鼠标悬停时放大图标本身 除了利用插件还可以利用CSS样式调整

jquery的鼠标悬停时放大图标本身除了利用插件还可以利用CSS样式调整