用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 儿童节 23
2021年 端午节 36
2022年 元 旦 237
2022年 春 节 268
 
  • 您现在的位置:首页 >> JS >> 内容

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

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'meta http-equiv='X-UA-Compatible' content='IE=edge'meta name='viewport' content='width=device-width, initial-scale=1.0'titleDocum......

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

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/4/12 发布时间:10:50:53 点击:247 录入:齐天大圣
  • 上一篇:JavaScript实现鼠标经过表格行给出颜色标识
  • 下一篇:JavaScript实现动态加载删除表格
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.1 Build 21.05.08(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021
    您正在使用IPV4(3.230.154.160)访问本站 您本次共访问本站 1 次