制作鼠标移动到div上面显示弹出框-白红宇


             
                  
                       
        三代亲子嘉年华 
         周乃容 |  3.6万  3562                            
       
            
               
      
        
                  
                   
       作者唐朝诗人白居易。草原上的野草 生长得很茂盛，每到秋天就枯黄了， 这样年复一年。野火烧得也不可能。

/*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()更精确