制作鼠标移动到div上面显示弹出框

<div class="show-dialog hide">
        <header>
            <div class="note">
                <span class="title">三代亲子嘉年华</span> <span class="info"> <span class="username">周乃容</span> <span class="split">|</span> <img src="/resources/img/liveSupport/live/zbbfcs_1.png"> <span class="playcount">3.6万</span> <img
                    src="/resources/img/liveSupport/review/zbpl_1.png"> <span class="viewcount">3562</span>
                </span>
            </div>
            <img src="/resources/img/liveSupport/review/jchgtx_3.png">
        </header>
        <footer>
            <img src="/resources/img/liveSupport/live/zzzbfm_8.png">
            <p>作者唐朝诗人白居易。草原上的野草 生长得很茂盛，每到秋天就枯黄了， 这样年复一年。野火烧得也不可能。</p>
        </footer>
    </div>

/*dialog*/
.show-dialog {
    width: 330px;
    height: 160px;
    background-color: #fff;
    border: 1px solid #CCD0D7;
    padding: 14px;
    position: absolute;
    border-radius: 4px;
}

.show-dialog>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E9EF;
}

.show-dialog>header>.note>span {
    display: block;
}

.show-dialog>header>.note>.title {
    color: #333;
    font-size: 16px;
}

.show-dialog>header>.note>.info {
    color: #99A2AA;
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.show-dialog>header>.note>.info>.split {
    padding: 0 10px;
}

.show-dialog>header>.note>.info>.playcount, .show-dialog>header>.note>.info>.viewcount {
    padding: 0 25px 0 3px;
}

.show-dialog>footer {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.show-dialog>footer>img {
    width: 96px;
    height: 60px;
}

.show-dialog>footer>p {
    color: #99A2AA;
    font-size: 10px;
    margin-left: 10px;
}

$('.default-right>li').hover(function(e) {
        var position = $(this).offset();
        $(".show-dialog").css({
            left : position.left,
            top : position.top - 165
        }).removeClass('hide');
    }, function(e) {
        $(".show-dialog").addClass('hide');
    });

总结：

1、jquery使用offset()比position()更精确