效果:移入移出事件&移入移出菜单(应用)

移入移出事件

//css 部分
    
//html部分

//script部分
    let oDiv = document.querySelector("div");
    // 1.移入事件
    // oDiv.onmouseover = function () {
    //     console.log("移入事件");
    // }
    // 注意点: 对于初学者来说, 为了避免未知的一些BUG, 建议使用onmouseenter
    // oDiv.onmouseenter = function () {
    //     console.log("移入事件");
    // }

    // 2.移出事件
    // oDiv.onmouseout = function () {
    //     console.log("移出事件");
    // }
    // 注意点: 对于初学者来说, 为了避免未知的一些BUG, 建议使用onmouseleave
    // oDiv.onmouseleave = function () {
    //     console.log("移出事件");
    // }
    // 3.移动事件
    oDiv.onmousemove = function () {
        console.log("移动事件");
    }

移入移出菜单应用

效果图.gif

实现:

    
    
    
    



    

        

        

        

    
    

        
微信二维码