1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 .redBorder {
7 border: 2px solid red;
8 }
9
10 .test1 {
11 width: 240px;
12 height: 150px;
13 background-color: #3493B9;
14 text-align: center;
15 padding: 3px 0px;
16 }
17
18 .test2 {
19 width: 160px;
20 height: 100px;
21 background-color: #47BAE7;
22 text-align: center;
23 line-height: 20px;
24 margin: 10px auto;
25 }
26
27 span {
28 width: 100px;
29 height: 35px;
30 background-color: #fff;
31 padding: 20px 20px 20px 20px;
32 }
33
34 body {
35 font-size: 12px;
36 }
37 </style>
38 <title>冒泡事件</title>
39 </head>
40 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
41 <script type="text/javascript">
42 $(document).ready(function() {
43 $(".test1").mouseover(function(event) {
44 $(".test1").addClass("redBorder");
45 //event.stopPropagation(); //阻止事件冒泡
46 });
47 $(".test1").mouseout(function(event) {
48 $(".test1").removeClass("redBorder");
49 });
50 $(".test2").mouseover(function(event) {
51 $(".test2").addClass("redBorder");
52 //event.stopPropagation(); //阻止事件冒泡
53 });
54 $(".test2").mouseout(function(event) {
55 $(".test2").removeClass("redBorder");
56 });
57 $("span").mouseover(function(event) {
58 $("span").addClass("redBorder");
59 //event.stopPropagation(); //阻止事件冒泡
60 });
61 $("span").mouseout(function(event) {
62 $("span").removeClass("redBorder");
63 });
64
65 });
66 </script>
67 <body>
68 <div class="test1">
69 <b>div元素</b>
70 <p class="test2">
71 <b>p元素</b><br/><br/>
72 <span><b>span元素</b></span>
73 </p>
74 </div>
75 </body>
76 </html>
