JavaScript实现鼠标经过显示下拉框

本文实例为大家分享了JavaScript实现鼠标经过显示下拉框的具体代码，供大家参考，具体内容如下

代码：

!DOCTYPE htML>
    html lang="en">
    head>
        meta charset="UTF-8">
        meta http-equiv="X-UA-Compatible" content="IE=Edge">
        meta name="viewport" content="width=device-width, inITial-scale=1.0">
        title>
    Document/title>
        style>
        * {
                margin: 0;
                padding: 0;
        }
                .nav {
                margin: 100px auto;
                width: 500px;
        }
                    .nav>
li {
                float: left;
        }
                li {
                list-style: none;
        }
                a {
                display: block;
                text-decoration: none;
                color: gray;
                height: 40px;
                width: 100px;
                text-align: center;
                line-height: 40px;
                box-sizing: border-box;
        }
                    .nav>
    li>
a {
                color: black;
        }
                    .nav>
    li>
a:hover {
                background-color: lightgray;
        }
                    .nav>
    li>
    ul>
    li>
a {
                /* display: none;
     */            border: 1px solid orange;
                border-top: none;
        }
                    .nav>
    li>
    ul>
    li>
a:hover {
                background-color: lightyellow;
        }
                    .nav>
    li>
ul {
                display: none;
        }
        /style>
    /head>
    body>
        ul class="nav" id=nav>
            li>
                a href="#" >
    新浪/a>
                ul>
                    li>
    a href="#">
    新闻/a>
     /li>
                    li>
    a href="#">
    体育/a>
     /li>
                    li>
    a href="#">
    快讯/a>
     /li>
                    li>
    a href="#">
    生活/a>
     /li>
                    li>
    a href="#">
    微博/a>
     /li>
                /ul>
            /li>
            li>
                a href="#" >
    新浪/a>
                ul>
                    li>
    a href="#">
    新闻1/a>
     /li>
                    li>
    a href="#">
    体育1/a>
     /li>
                    li>
    a href="#">
    快讯1/a>
     /li>
                    li>
    a href="#">
    生活1/a>
     /li>
                    li>
    a href="#">
    微博1/a>
     /li>
                /ul>
            /li>
            li>
                a href="#" >
    新浪/a>
                ul>
                    li>
    a href="#">
    新闻2/a>
     /li>
                    li>
    a href="#">
    体育2/a>
     /li>
                    li>
    a href="#">
    快讯2/a>
     /li>
                    li>
    a href="#">
    生活2/a>
     /li>
                    li>
    a href="#">
    微博2/a>
     /li>
                /ul>
            /li>
        /ul>
        script>
            VAR heads = document.querySelectorAll('.nav>
    li');
            for (var i = 0;
     i  heads.length;
 i++) {
            heads[i].onmouseover = function() {
                    this.children[1].style.display = "block";
            }
            heads[i].onmouseout = function() {
                    this.children[1].style.display = "none";
            }
        }
        /script>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• js制作的鼠标悬浮时产生的下拉框效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！