js如何使鼠标移上当前class="hhy"显示，移走当前class="hhy"消失？

Question

<div class="hahayao" style="width:500px;height:200px">
<div class="hhy" style="width:200px;height:100px;display:none"></div>
<div class="hhy" style="width:200px;height:100px;display:none"></div></div>
<div class="hahayao" style="width:500px;height:200px">
<div class="hhy" style="width:200px;height:100px;display:none"></div>
<div class="hhy" style="width:200px;height:100px;display:none"></div></div>

Answer 1

① 可以采取先获得class=hhy的盒子，用一个for循环给每个子盒子注册鼠标离开事件onmouseleave或onmouseout；

或者是事件委托，就是上图显示的，给它的父盒子注册事件；

② 注意：只要是display：none；的情况，注册鼠标悬浮事件是没用的，这个时候只能给它的父盒子注册鼠标悬浮事件！！！

③ 而当子盒子的display：block；的时候，就可以给子盒子注册鼠标离开事件让display：none；

追问

为什么第一次移到上面不显示，第二次才开始显示？另外let div=document.getElementsByClassName("hhy");什么意思，删掉也正常啊

Answer 2

for (let elem of document.getElementsByClassName('hahayao')) {
elem.addEventListener('mouseover', function (e) {
this.firstElementChild.style.display = '';
});
elem.addEventListener('mouseout', function (e) {
this.firstElementChild.style.display = 'none';
})
}

Answer 3

用js可以做，但是比较麻烦，为什么不选择用css去解决呢？
添加一个::hover就可以解决