JavaScript實現(xiàn)鼠標經(jīng)過顯示下拉框

更新時間：2021年04月11日 17:10:23 作者：KathyLJQ

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標經(jīng)過顯示下拉框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)鼠標經(jīng)過顯示下拉框的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js制作的鼠標懸浮時產(chǎn)生的下拉框效果

JS設置CSS樣式的方式匯總
這篇文章給大家總結了JS設置CSS樣式的幾種方式，每種方式都非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-01-01
微信小程序?qū)崿F(xiàn)消息框彈出動畫
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)消息框彈出動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
給Javascript數(shù)組插入一條記錄的代碼
給Javascript數(shù)組插入一條記錄的代碼...
2007-08-08
js注冊時輸入合法性驗證方法
這篇文章主要為大家詳細介紹了js注冊時輸入合法性驗證方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
詳解前端如何對超大量數(shù)據(jù)進行渲染
這篇文章主要為大家詳細介紹了前端如何對超大量數(shù)據(jù)進行渲染,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-12-12
JavaScript判斷密碼強度(自寫代碼)
網(wǎng)站注冊的時候經(jīng)?？梢钥吹矫艽a強度提示，今天自己做了一個JS密碼強度判斷，具體實現(xiàn)如下，喜歡的朋友可以學習下
2013-09-09
JavaScript?日期和時間的格式化方法
這篇文章主要介紹了JavaScript?日期和時間的格式化,JavaScript?中的?Date?對象提供了許多方法和屬性，可以用于處理日期和時間，根據(jù)具體情況選擇適合的方法和技巧，需要的朋友可以參考下
2023-02-02
js實現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法
這篇文章主要介紹了js實現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法,涉及javascript結合php實現(xiàn)文件無刷新上傳等相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
原生JavaScript實現(xiàn)刮刮樂
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)刮刮樂，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
js實現(xiàn)橫向伸展開的二級導航菜單代碼
這篇文章主要介紹了js實現(xiàn)橫向伸展開的二級導航菜單代碼,涉及javascript鼠標事件及頁面元素遍歷的相關技巧,需要的朋友可以參考下
2015-08-08