Hover与JavaScript结合案例

原图：

鼠标移入到红色矩形到导航栏下面的内容就会变化。 HTML源代码：

<ul class="yuy">
    <li><a href="">English</a></li>
    <li><a href="">Español</a></li>
    <li><a href="">Français</a></li>
    <li><a href="">Русский язык</a></li>
    <li><a href="">日本語</a></li>
    <li><a href=""> عربى</a></li>
<li><a href="">한국어</a></li>
<li><a href="">Deutsch</a></li>
    <li><a href="">Português</a></li>
</ul>

CSS样式表：

.yuy{
    float: left;
    height: 35px;
line-height: 35px;
  float: left;
}
.yuy li a{
    padding: 0px 8px;
    font-family: Arial, Helvetica, sans-serif;
    height: 34px;
display: inline-block;

    font-size: 12px;
    text-align: center;
    color: #373737;
    line-height: 35px;
    background: #fff;
}
.yuy a:hover{
    color: #0280bb;
    border: 1px solid #d5d5d5;
    border-bottom: none;
    border-top: 2px solid #f00;
    position: relative;
    top: -1px;
    height: 35px;
}

实现效果图：

鼠标移入到li标签，就会触发hover会带有一个切换的效果。

JavaScript

var boxList = document.getElementsByClassName("box");
    var yuList = document.getElementsByClassName("yu");

    for (let i = 0; i < yuList.length; i++) {
        yuList[i].onmouseenter = function (){
            for (let j = 0; j < boxList.length; j++) {
                boxList[j].style.display = "none";
                boxList[i].style.display = "block";
                console.log("aaa");
            }
        }
        // console.log(yuList[i].index);
    }
    // console.log(yuList);
}; 

谢谢观看，如有不足希望指点一二！