鼠标经过导航的div时候，无法让类名为navigation_other的div显示出来

Question

鼠标经过导航这个类名为navigation_describe的div时候，让类名为navigation_other的div显示出来，使用js获取类添加onmouseenter事件，但是仍然无法改变navigation_other的display，请问我哪里写错了？怎么改？

<div class='header'>
    <div class='navigation_index'>
        <div class='navigation'>
            <div class='navigation_describe'>
                导航
            </div>
        </div>
    </div>

    
    <div class='navigation_other'>
        首页
    </div>
    
    <div class='navigation_other'>
        征婚信息
    </div>
</div>

.header {
    width: 100%;
    overflow: hidden;
    background: rgba(0,0,255,1);
}

.navigation_index {
    height: 50px;
    width: 100%;
    background: rgba(102,0,204,1);
    padding-top: 10px;
}

.navigation_index:before {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.navigation_index:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.navigation {
    box-sizing: border-box;
    height: 30px;
    width: 50px;
    margin-top: 0;
    background: rgba(155,155,155,1);
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 6px solid rgba(0,255,255,1);
    border-bottom: 6px solid rgba(155,155,155,1); /*定义实线*/
    background-clip: content-box;
    position: relative;
}

.navigation_describe {
    position: absolute;
    left: 0;
    top: -6px;
    height: 30px;
    line-height:30px;
    width: 50px;
    background: rgba(102,51,153,1);
    color: rgba(255,255,255,1);
    text-align: center;
    z-index: 10;
    
}

.navigation_other {
    height: 50px;
    line-height: 50px;
    display: none;
}

document.getElementsByClassName("navigation_index")[0].mouseenter=function(){
    console.log('鼠标经过事件');
    document.getElementsByClassName("navigation_other")[0].style.display="block";  //鼠标滑入显示；
}

Answer 1

mouseenter改为onmouseenter

Answer 2

楼上正解了，把mouseenter改为onmouseenter，因为mouseenter是事件，onmouseenter是事件对象，对于事件我们可以监听，所以，如果要用mouseenter，可以改成下面的方式

document.getElementsByClassName("navigation_index")[0].addEventListener('mouseenter',function(){
    console.log('鼠标经过事件');
    document.getElementsByClassName("navigation_other")[0].style.display="block";  //鼠标滑入显示；
})

Answer 3

你把mouseenter挂在了父元素上，是不是在mouseleave的时候做了逆操作？
mouseenter只会在绑定的元素上触发，挂在父元素上，那你鼠标从父元素移到子元素，会触发子元素的mouseenter,同时触发父元素的mouseleave.
如果是这样，那解决办法有几个：
1.mouseenter挂到需要的子元素上
2.使用mouseover，但是要控制触发频率，可以用lodash的debounce函数。