一个简单的原生javascript显示隐藏效果

最后更新于：2020-09-02 23:20:56 | 64 次浏览

html部分

<div class="downloadApp">
    <a href="javascript:;" id="codeShow">
        APP下载
    </a>
    <div class="code" id="app_code_pic">
        <img src="images/app_code_pic.png" alt="">
    </div>
</div>

css部分

.downloadApp {
    position: relative;
    width: 200px
}

.downloadApp a {
    font-size: 22px;
}

.downloadApp .code {
    width: 150px;
    height: 220px;
    display: none;
    position: absolute;
    left: 0;
    top: 35px;
}

.downloadApp .code img {
    width: 100%;
}

javascript部分

function codeShow() {
    var codeShow = document.getElementById('codeShow');
    var app_code_pic = document.getElementById('app_code_pic');
    var closeTimer = null;
    app_code_pic.onmouseover = codeShow.onmouseover = function () {
        clearTimeout(closeTimer)
        app_code_pic.style.display = "block"
    }
    app_code_pic.onmouseout = codeShow.onmouseout = function () {
        closeTimer = setTimeout(function () {
            app_code_pic.style.display = "none"
        }, 500)
    }
}
codeShow()