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         <style type="text/css">
 9             .buttons {
10                 width: 100px;
11                 float: left;
12                 text-align: center;
13                 font-weight: bold;
14                 margin: 5px;
15                 border: 1px solid;
16             }
17             .highlight {
18                 background-color: yellow;
19                 font-weight: bold;
20                 color: blue;
21             }
22         </style>
23         <script src="jquery-1.5.2.js" type="text/javascript"></script>
24         <script type="text/javascript">
25             $(document).ready(function(){
26                 $('.buttons').mouseover(function(){
27                     /*
28                      * css(property, value)
29                      * 用于设置属性property为值value
30                      * 如$('img').css('width', function(){ reutrn $(this).height()+30; });
31                      */
32                     //$('p').css({
33                         //'background-color': 'cyan',
34                         //'font-weight': 'bold',
35                         //'color': 'blue'
36                     //});
37                     $('p').addClass('highlight');
38                 });
39                 $('.buttons').mouseout(function(){
40                     $('p').removeClass('highlight');
41                 });
42             });
43             
44         </script>
45         <body>
46             <span class="buttons">Hightlight</span><br /><br />
47             <P>
48                 Styles make the fromatting job much easier and more efficient. To give an attractive look to websitees,
49                 styles are heavily used! A person must have a good knowlege of HTML 
50             </P>
51         </body>
52 </html>
posted on 2017-01-21 22:13 Sharpest 阅读(312) 评论(0) 编辑收藏举报