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