[JavaScript知识库]JavaScript-229：mouseover和mouseenter区别

mouseover 鼠标经过自身盒子会触发 经过子盒子还会触发
mouseenter 只有经过自身盒子触发 因为不会冒泡
mouseleave 鼠标离开触发 同样不会冒泡

结构

   <div class="father">
       <div class="son"></div>
   </div>

CSS

        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }

js

        var father = document.querySelector('.father');
        var son = document.querySelector('.son')
        // father.addEventListener('mouseover', function () {
        //     console.log(11);

        // })
        // father.addEventListener('mouseenter', function () {
        //     console.log(11);

        // })
        father.addEventListener('mouseleave', function () {
            console.log(11);

        })

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖