JavaScriptは、マウスが通過したときにドロップダウンボックスを表示するように実装します。

この記事では、マウスがドロップダウンボックスの上を通過するときにドロップダウンボックスを表示するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>

    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        
        .nav {
            マージン: 100px 自動;
            幅: 500ピクセル;
        }
        
        .nav>li {
            フロート: 左;
        }
        
        li {
            リストスタイル: なし;
        }
        
        {
            表示: ブロック;
            テキスト装飾: なし;
            色: グレー;
            高さ: 40px;
            幅: 100ピクセル;
            テキスト配置: 中央;
            行の高さ: 40px;
            ボックスのサイズ: 境界線ボックス;
        }
        
        .nav>li>a {
            色: 黒;
        }
        
        .nav>li>a:hover {
            背景色: ライトグレー;
        }
        
        .nav>li>ul>li>a {
            /* 表示: なし; */
            境界線: 1px 実線オレンジ;
            上境界線: なし;
        }
        
        .nav>li>ul>li>a:hover {
            背景色: 薄い黄色;
        }
        
        .nav>li>ul {
            表示: なし;
        }
    </スタイル>
</head>

<本文>
    <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="#">Weibo</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="#">Weibo1</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="#">Weibo 2</a> </li>
            </ul>
        </li>


    </ul>

    <スクリプト>
        var heads = document.querySelectorAll('.nav>li');
        (var i = 0; i < heads.length; i++) の場合 {
            heads[i].onmouseover = 関数() {
                this.children[1].style.display = "ブロック";
            }
            heads[i].onmouseout = 関数() {
                this.children[1].style.display = "なし";

            }
        }
    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: