鼠标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; 

}