鼠标hover离开了父元素位置，子元素就消失，但是父子元素间有空隙怎么办,如图

Question

.app-main .main-header{
    position: relative;
    display: flex;
    height: 70px;
    background-color: #f5f5f7;
    box-sizing: border-box;
    border-bottom: 1px solid #cdd0d1;
    cursor: pointer;
}

.app-main .main-header .header-dialog{
    display: none;
    position: absolute;
    top: 80px;
    left: 45px;
    width: 120px;
    height: 135px;
    padding: 25px;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 1000;
    box-shadow:1px 1px 5px 5px rgba(6, 15, 24, 0.1)
}


hoverFn()
function hoverFn(){
    $('.app-main .main-header .header-left').hover(function(){
        $('.app-main .main-header .header-dialog').fadeToggle();
    })
}

Answer 1

这样挺美观的... 开玩笑~都绝对定位了，为什么不网上挪挪呢？你的意思是鼠标点不到创建XX是吗;

Answer 2

子元素用margin-top:负值移动和父元素连接起就行了

Answer 3

这种情况一般都是设置个定时器，如300毫秒，这个时间足够你移动到下面了，300毫秒后判断隐藏

Answer 4

纯css的话要不就在外面包裹一个透明div扩大一下范围，要不就往上移动一点。。或者用伪元素 .app-main .main-header .header-dialog:before{ display:block; content:'' position:absolute; height: 10px; width:100%; top:-10px; left:0; }