How to make the mouse hover over the button to display the layer, when the mouse is over the button or layer, the layer does not disappear, if you leave both, it will disappear?

just like the "message", "dynamic" and other buttons at the top of bilibili, a pull-down suspension layer appears when you hover over it. As long as the mouse is still on the button, or on the layer, the layer will not disappear, without both will disappear.

Mar.20,2021

< style >

-sharpparent{
    position:relative;
    width:100px;
    height:100px;
    background:-sharpf99;
}
-sharpchildren{
    position: absolute;
    width:100px;
    height:100px;
    right:-100%;
    top:0;
    background:-sharp99f;
    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 >

Does

mean this?

-Update

< style >

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

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

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


< 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:-sharpf99;
    border:1px solid -sharpccc;
    cursor:pointer;
    float:left;
}
.hidden{
    position: absolute;
    width:100px;
    height:100px;
    background:-sharp99f;
    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>


< 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 >

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bedb36-39f57.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bedb36-39f57.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?