鼠标事件移入移出的比较

鼠标移入事件onmouseover
鼠标移出事件onmouseout
鼠标移入事件onmouseenter
鼠标移出事件onmouseleave

鼠标进出div盒子的效果不同
简单效果图如下:
鼠标事件移入移出的比较_第1张图片

源代码如下:


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>

        <style>
            div{
                width: 300px;
                height: 300px;
                border: 1px solid #000000;
                float: left;
                margin: 10px 20px;
            }
            div p{
                background-color: gray;
                color: #FFFFFF;
                text-align: center;
                height: 50px;
                line-height: 50px;
            }
        style>

        <script>

            var a = 0;//声明
            var b = 0;
            var c = 0;
            var d = 0;
            var e = 0;

            //鼠标移动事件
            function myMove(){
      
                a++; // a = a + 1;
                var font = document.getElementById("a");//获取font标签对象
                font.innerHTML = a;
            }

            //鼠标移入事件over
            function myOver(){
      
                b++;
                var font = document.getElementById("b");//获取font标签对象
                font.innerHTML = b;
            }

            //鼠标移出事件out
            function myOut(){
      
                c++;
                var font = document.getElementById("c");//获取font标签对象
                font.innerHTML = c;
            }

            //鼠标移入事件enter
            function myEnter(){
      
                d++;
                var font = document.getElementById("d");//获取font标签对象
                font.innerHTML = d;
            }

            //鼠标移出事件leave
            function myLeave(){
      
                e++;
                var font = document.getElementById("e");//获取font标签对象
                font.innerHTML = e;
            }

        script>

    head>
    <body>

        <div onmousemove="myMove()">
            <font id="a">0font>
            <p>鼠标移动事件onmousemovep>
        div>

        
        <div onmouseover="myOver()">
            <font id="b" style="border: 1px solid #000000;">0font>
            <p>鼠标移入事件onmouseoverp>
        div>

        <div onmouseout="myOut()">
            <font id="c">0font>
            <p>鼠标移出事件onmouseoutp>
        div>

        <div onmouseenter="myEnter()">
            <font id="d">0font>
            <p>鼠标移入事件onmouseenterp>
        div>

        <div onmouseleave="myLeave()">
            <font id="e">0font>
            <p>鼠标移出事件onmouseleavep>
        div>

    body>
html>

你可能感兴趣的:(前端,鼠标,源代码,鼠标移入移出事件)