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 .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>