zoukankan      html  css  js  c++  java
  • 制作鼠标移动到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()更精确

  • 相关阅读:
    mescroll vue tab页实现切换刷新列表
    路由权限配置
    js实现拖拽
    .eslintrc.js
    vue-cli项目中使用mock结合axios-mock-adapter生成模拟数据【转】
    原型模式
    设计模式简介
    @RequestParam @RequestBody @PathVariable 等参数绑定注解详解
    spring定时任务执行两次
    java反射--注解的定义与运用以及权限拦截
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/5825741.html
Copyright © 2011-2022 走看看