when the mouse navigates through the div of this class named navigation_describe, it shows the div of the class named navigation_other, and uses the js to get the class to add onmouseenter events, but it still cannot change the display, of navigation_other. What is wrong with me? How to change it?
<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"; //;
}