脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js鼠标经过显示下拉框

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

 更新时间：2021年04月11日 17:10:23   作者：KathyLJQ  
这篇文章主要为大家详细介绍了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设置CSS样式的方式汇总

    JS设置CSS样式的方式汇总

    这篇文章给大家总结了JS设置CSS样式的几种方式，每种方式都非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-01-01
  • 微信小程序实现消息框弹出动画

    微信小程序实现消息框弹出动画

    这篇文章主要为大家详细介绍了微信小程序实现消息框弹出动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 给Javascript数组插入一条记录的代码

    给Javascript数组插入一条记录的代码

    给Javascript数组插入一条记录的代码...
    2007-08-08
  • js注册时输入合法性验证方法

    js注册时输入合法性验证方法

    这篇文章主要为大家详细介绍了js注册时输入合法性验证方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 详解前端如何对超大量数据进行渲染

    详解前端如何对超大量数据进行渲染

    这篇文章主要为大家详细介绍了前端如何对超大量数据进行渲染,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • JavaScript判断密码强度(自写代码)

    JavaScript判断密码强度(自写代码)

    网站注册的时候经常可以看到密码强度提示，今天自己做了一个JS密码强度判断，具体实现如下，喜欢的朋友可以学习下
    2013-09-09
  • JavaScript 日期和时间的格式化方法

    JavaScript 日期和时间的格式化方法

    这篇文章主要介绍了JavaScript 日期和时间的格式化,JavaScript 中的 Date 对象提供了许多方法和属性，可以用于处理日期和时间，根据具体情况选择适合的方法和技巧，需要的朋友可以参考下
    2023-02-02
  • js实现头像图片切割缩放及无刷新上传图片的方法

    js实现头像图片切割缩放及无刷新上传图片的方法

    这篇文章主要介绍了js实现头像图片切割缩放及无刷新上传图片的方法,涉及javascript结合php实现文件无刷新上传等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 原生JavaScript实现刮刮乐

    原生JavaScript实现刮刮乐

    这篇文章主要为大家详细介绍了原生JavaScript实现刮刮乐，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js实现横向伸展开的二级导航菜单代码

    js实现横向伸展开的二级导航菜单代码

    这篇文章主要介绍了js实现横向伸展开的二级导航菜单代码,涉及javascript鼠标事件及页面元素遍历的相关技巧,需要的朋友可以参考下
    2015-08-08

最新评论