css代码

#outer{
            width: 300px;
            height: 300px;
            background-color: cadetblue;
            position: relative;
        }
        #inner{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: chocolate;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

html代码

<div id="outer">
        <div id="inner"></div>
    </div>

script代码

let outer = document.getElementById("outer");
        // 鼠标移入移出事件 无事件冒泡
        outer.addEventListener('mouseenter',function(){
            console.log('mouseenter')
        });
        outer.addEventListener('mouseleave',function(){
            console.log('mouseleave')
        })

        // 鼠标移入移出事件 带事件冒泡

        outer.addEventListener('mouseover',function(e){
            console.log('mouseenter')
        });
        outer.addEventListener('mouseout',function(e){
            console.log('mouseleave')
        })