欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Hover与JavaScript结合案例

程序员文章站 2022-07-04 12:03:11
...

原图:

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

实现效果图:

Hover与JavaScript结合案例
鼠标移入到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);
}; 

谢谢观看,如有不足希望指点一二!