一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務(wù)器之家:專注于服務(wù)器技術(shù)及軟件下載分享
分類導(dǎo)航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務(wù)器之家 - 編程語言 - JavaScript - js教程 - JavaScript實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示下拉框

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

2022-02-27 17:25KathyLJQ js教程

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

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

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

代碼:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持服務(wù)器之家。

原文鏈接:https://blog.csdn.net/KathyLJQ/article/details/115585358

延伸 · 閱讀

精彩推薦
  • js教程JS新手入門數(shù)組處理的實(shí)用方法匯總

    JS新手入門數(shù)組處理的實(shí)用方法匯總

    這篇文章主要給大家介紹了關(guān)于JS新手入門數(shù)組處理實(shí)用方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)...

    Assam1804042022-02-24
  • js教程JavaScript實(shí)現(xiàn)瀑布流布局的3種方式

    JavaScript實(shí)現(xiàn)瀑布流布局的3種方式

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)瀑布流布局的3種方式,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下...

    杏子_10247432021-12-20
  • js教程JS實(shí)現(xiàn)一個(gè)秒表計(jì)時(shí)器

    JS實(shí)現(xiàn)一個(gè)秒表計(jì)時(shí)器

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)一個(gè)秒表計(jì)時(shí)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下...

    yiran010100110232022-02-13
  • js教程js實(shí)現(xiàn)碰撞檢測(cè)

    js實(shí)現(xiàn)碰撞檢測(cè)

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)碰撞檢測(cè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下...

    搬磚大法8192022-01-11
  • js教程微信小程序+mqtt,esp8266溫濕度讀取的實(shí)現(xiàn)方法

    微信小程序+mqtt,esp8266溫濕度讀取的實(shí)現(xiàn)方法

    這篇文章主要介紹了微信小程序+mqtt,esp8266溫濕度讀取的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友...

    巴法云6052022-02-22
  • js教程js實(shí)現(xiàn)隨機(jī)點(diǎn)名

    js實(shí)現(xiàn)隨機(jī)點(diǎn)名

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下...

    搬磚大法10172022-01-04
  • js教程javascript實(shí)現(xiàn)簡(jiǎn)單留言板案例

    javascript實(shí)現(xiàn)簡(jiǎn)單留言板案例

    這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單留言板案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下...

    愛前端的茂茂8072022-01-20
  • js教程小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇

    小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一...

    紙上畫佳人11852022-02-17
主站蜘蛛池模板: 精品一久久香蕉国产线看播放 | 国模娜娜一区二区三区 | sese在线播放| 91精品国产9l久久久久 | 日本h乱淫动漫在线观看 | 国产精品亚洲va在线观看 | 成人人免费夜夜视频观看 | 99久久这里只有精品 | 精品无码久久久久久久久 | 国产无套在线播放 | 香蕉在线播放 | 青青青青久久国产片免费精品 | 美女校花被调教出奶水 | 男男18视频免费网站 | 久久久91精品国产一区二区 | 岛国不卡 | 日本国产高清色www视频在线 | 我半夜摸妺妺的奶C了她 | 好深快点再快点好爽视频 | 国产综合视频在线 | 国产精品亚洲片夜色在线 | 美女撒尿毛片免费看 | 亚洲午夜性春猛交xxxx | 嫩草影院永久在线一二三四 | 国产精品毛片高清在线完整版 | 欧美日韩精品一区二区三区视频 | 成人激情 | 久久久久综合 | 亚洲高清视频在线观看 | 干b视频在线观看 | 外女思春台湾三级 | 俄罗斯女人与公拘i交酡 | asspics大尿chinese | 日本在线小视频 | 国产一区二区免费福利片 | 亚洲天堂中文字幕 | 男女发生性关系视频 | 精品女同同性视频很黄很色 | 无人影院免费观看 | 日本xxwwwxxxx| 3344在线看片 |