day-2.2 鼠标事件函数案例 

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title>Title</title>
 5         <style>
 6             body{font-family: "Microsoft YaHei",serif;}
 7             body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
 8             ol,ul,li{margin:0;padding:0;list-style:none;}
 9             img{border:none;}
10 
11             #box1,#box2{
12                 width: 200px;
13                 height: 40px;
14                 margin: 50px auto;
15                 line-height: 40px;
16                 text-align: center;
17                 color: #fff;
18                 font-size: 12px;
19                 font-weight: bolder;
20                 background-color: #999;
21             }
22         </style>
23     </head>
24     <body>
25         <div id="box1"></div>
26         <div id="box2"></div>
27         
28         <script>
29 
30             var oBox1 = document.getElementById("box1"),
31                 oBox2 = document.getElementById("box2");
32 
33             oBox1.onmouseenter = function () {
34                 oBox2.innerHTML = "移入了BOX1";
35             };
36 
37             oBox1.onmouseleave = function () {
38                 oBox2.innerHTML = "";
39             };
40 
41             oBox2.onmouseenter = function () {
42                 oBox1.innerHTML = "移入了BOX2";
43             };
44 
45             oBox2.onmouseleave = function () {
46                 oBox1.innerHTML = "";
47             }
50         </script>
51     </body>
52 </html>

案例结果：

1、移入盒子1，在盒子2里面显示已移入盒子1

2、移入盒子2，在盒子1里面显示已移入盒子2

posted @ 2018-05-16 15:30  bibiguo  阅读(145)  评论(0)    收藏  举报