如何实现鼠标悬停在按钮上显示层，鼠标在按钮或层上时，层都不消失，离开这两者则消失？

Question

就像B站顶部的“消息”、“动态”等按钮一样，悬停在上面就出现下拉悬浮层。鼠标只要还在按钮上，或层上，层就不会消失，离开了这两者则消失。

Answer 1

<style>

#parent{
    position:relative;
    width:100px;
    height:100px;
    background:#f99;
}
#children{
    position: absolute;
    width:100px;
    height:100px;
    right:-100%;
    top:0;
    background:#99f;
    display:none;
}

</style>
<div id="parent">

<div id="children"></div>

</div>
<script>

var eParent = document.getElementById('parent')
var eChildren = document.getElementById('children')

eChildren.onmouseover =  eParent.onmouseover = function(e){
    eChildren.style.display="block"
}
eChildren.onmouseout =  eParent.onmouseout = function(e){
    eChildren.style.display="none"
}

</script>

是指这样吗

-------------------------------------更新

<style>

*{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
}
.item{
    position:relative;
    width:100px;
    height:100px;
    background:#f99;
    border:1px solid #ccc;
    cursor:pointer;
}
.item div{
    position: absolute;
    width:100px;
    height:100px;
    right:-100%;
    top:0;
    background:#99f;
    display:none;
}

</style>
<ul id="list">

<li class="item">
    <div></div>
</li>
<li class="item">
    <div></div>
</li>
<li class="item">
    <div></div>
</li>

</ul>
<script src="https://cdn.bootcss.com/jquer...;></script>
<script>

$('.item').on('mouseover',function(){
    $(this).find('div').css('display','block')
})
$('.item').on('mouseout',function(){
    $(this).find('div').css('display','none')
})

</script>

*{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
    position:relative;
    width:500px;
    margin:0 auto;
    height:500px;
}
.item{
    position:relative;
    width:100px;
    height:100px;
    background:#f99;
    border:1px solid #ccc;
    cursor:pointer;
    float:left;
}
.hidden{
    position: absolute;
    width:100px;
    height:100px;
    background:#99f;
    display:none;
    top:100%;
    left:0;
}
.bu{
    display:block;
    width:100%;
    height:100%;
}

</style>
<ul id="list">

<li class="item">
    <a class="bu" href="www.baidu.com"></a>
    <div class="hidden"></div>
</li>
<li class="item">
    <a class="bu"></a>
    <div class="hidden"></div>
</li>
<li class="item">
    <a class="bu"></a>
    <div class="hidden"></div>
</li>

</ul>
<script src="https://cdn.bootcss.com/jquer...;></script>
<script>

$('.item').on('mouseover',function(){
    $(this).find('.hidden').css('display','block')
})
$('.item').on('mouseout',function(){
    $(this).find('.hidden').css('display','none')
})

</script>