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             }
48 
49 
50         </script>
51     </body>
52 </html>

案例结果：

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

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

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="keywords" content="关键词">
        <meta name="description" content="描述">
        <meta name="author" content="潭州教育-阿飞老师">
        <style>
            body{font-family: "Microsoft YaHei",serif;}
            body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ol,ul,li{margin:0;padding:0;list-style:none;}
            img{border:none;}

            #box1,#box2{
                width: 200px;
                height: 40px;
                margin: 50px auto;
                line-height: 40px;
                text-align: center;
                color: #fff;
                font-size: 12px;
                font-weight: bolder;
                background-color: #999;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>

        <script>

            var oBox1 = document.getElementById("box1"),
                oBox2 = document.getElementById("box2");

            oBox1.onmouseenter = function () {
                oBox2.innerHTML = "移入了BOX1";
            };

            oBox1.onmouseleave = function () {
                oBox2.innerHTML = "";
            };

            oBox2.onmouseenter = function () {
                oBox1.innerHTML = "移入了BOX2";
            };

            oBox2.onmouseleave = function () {
                oBox1.innerHTML = "";
            }

        </script>
    </body>
< ml>

day-2.2 鼠标事件函数案例

猜你喜欢