个人中心
gpt4 book ai didi

javascript - jQuery - 导航栏悬停不显示

转载 作者：太空狗 更新时间：2023-10-29 14:18:54 26 4
gpt4 key购买 nike

我正在从头开始构建简单的 Web 模板。我使用旧式 jquery 在导航栏上悬停以显示列表 <li> ，但它仅适用于关于我们 列，不适用于产品 列。

怎么了？我应该怎么做？

HTML 页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Template</title>
    <meta name="viewport" content="width=device-width" />
    <script src="<?php echo base_url();?>js/jquery-3.0.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">

    <script>
        $(document).ready(function(){
            $("#nav ol li").hover(function(){
                $("ol",this).show();   //when onmouseover  //ol ใน nav ol li อีกชั้นนึง
            },
            function(){  //when mouseout
                $("ol",this).hide();
            });
        });
    </script>
</head>
<body>
    <div id="wrapper">
        <div class="toptext">
            <span style="margin-left: 85%"><?php echo anchor("login","เข้าสู่ระบบ");?></span>
            <span style="float:right;"><?php echo anchor("register/index","สมัครสมาชิก");?></span>
        </div>
        <div id="header">
            <h1><p></p></h1>
        </div>
        <div id="nav">
            <ol>
                <li><a href="<?php echo base_url();?>index.php/home">Home</a></li>
                <li><a href="#">About us</a>
                    <ol>
                        <li><a href="#">ประวัติ</a></li>
                        <li><a href="#">xxxxx</a></li>
                        <li><a href="#">xxxxxx</a></li>
                    </ol>
                <li><a href="#">Product</a></li>
                    <ol>
                        <li><a href="#">xxxxx</a></li>
                        <li><a href="#">xxxxx</a></li>
                        <li><a href="#">xxxxxx</a></li>
                    </ol>
                <li><a href="#">Contact us</a></li>
            </ol>
        </div>
        <div id="content">
            <div id="left-side">
              <p1>Homepage<p1> 
            </div>
            <div id="right-side">
                <div class="searchbox">
                    <?php echo form_open('search');?>
                        <h3 style="text-align:center;"> ค้นหาสินค้า </h3>
                            <div class="search-bar">
                                <input type="text" size="20" class="sfield" name="searchterm" value="Search...">
                                <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
                            </div>
                    <?php echo form_close();?>
                </div>
            </div>
            <div class="fa fa-search"></div>

        </div>
        <div id="footer"><p>Footer</p></div>
    </div>
</body>

CSS

html,body{margin:0px;padding:0px;font-size:1vw;}
    body{background:#cceeff;font-family:"verdana"; }
    #wrapper{margin:auto;padding:0px;width:75%;}
    .toptext{margin-top:1vh;margin-bottom: 1vh;}
        .toptext span a{padding:3px;color:#000;text-decoration:none;}
        .toptext span a:hover{background:#0052cc;
        -webkit-transition: background-color 0.3s ease-out;
        -moz-transition: background-color 0.3s ease-out;
        -o-transition: background-color 0.3s ease-out;
        transition: background-color 0.3s ease-out;
        color:white;}
    #header{margin:0px;padding:0px;width:100%;height:18vh;float:left;
        background: #99d6ff;
        background-image: url("http://cdn.tigthai.com/uploads/201511/24/09396970014483375934182_One-Piece-Thousand-Strom-main.jpg"); /* fallback */
        background-image: url("http://cdn.tigthai.com/uploads/201511/24/09396970014483375934182_One-Piece-Thousand-Strom-main.jpg"), linear-gradient(#99d6ff, #006bb3); /* W3C */

        background-blend-mode: multiply;
    }
        #header h1{margin:0px;padding:0px;/*border-bottom:1px solid #eee;*/font-size:20px;padding-bottom:10px;}
    #nav{margin:0px;padding:0px;width:100%;float:left;
        background: #80ffe5; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
    }
        #nav ol{list-style:none;margin:0px;padding:0px;}
        #nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
        #nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none;}
        #nav ol a:hover{background:#f2f2f2;
        -webkit-transition: background-color 0.3s ease-out;
        -moz-transition: background-color 0.3s ease-out;
        -o-transition: background-color 0.3s ease-out;
        transition: background-color 0.3s ease-out;
        }
            #nav ol ol{position:absolute;top:35px;left:0px;display:none;
                background: #80ffe5; /* For browsers that do not support gradients */
                background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
                background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
                background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
                background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
            }
                #nav ol ol li{border-bottom:1px;}
    #content{float:left;margin-top:2vh;padding:0px;width:100%;display:flex;min-height:70vh;word-break: break-all;}
        #right-side{float:left;margin-left:2vh;width:30%;border: solid 1px grey;background:white;}
            #right-side ol{list-style:none;}
        #left-side{float:left;width:70%;border: solid 1px grey;background:white;}
    #footer{float:left;margin-top:2vh;padding:2vh;width:100%;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;

        background: #99d6ff; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(#99d6ff, #006bb3); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#99d6ff, #006bb3); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#99d6ff, #006bb3); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#99d6ff,#006bb3); /* Standard syntax */
    }
    .searchbox
    {
        background: #9999ff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
    }
    .loginbox
    {
        background: #9999ff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
        width: 40%;
    }
    .loginbox ul li
    {
        list-style:none;
        margin-left:-10px;
    }
    .search-bar 
    {
        height: 29px;
        background-color: #e1e1e1;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        margin-left:20px;
        margin-right:20px;
        margin-bottom:10px;
        width:230;
        position:relative;  
    }
    .search-bar .searchbutton 
    {
        position:absolute;
        top:23%;
        right:5px;
    }
    .sfield 
    {
        float: left;
        margin: 5px 0 0 8px;
        font: 8pt Verdana;
        color: #888;
        height: 20px;
        line-height: 18px;
        padding: 0;
        background: transparent;
        border: 0;
        max-width: 100%px;
    }

最佳答案

修复了你的 </li>下面代码中的标签，也替换了 $("ol",this)与 $(this).find("ol") .似乎有效:http://codepen.io/8odoros/pen/wzALyq 

<li><a href="#">About us</a>
    <ol>
        <li><a href="#">ประวัติ</a></li>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxxx</a></li>
    </ol>
</li>
<li><a href="#">Product</a>
    <ol>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxx</a></li>
        <li><a href="#">xxxxxx</a></li>
    </ol>
</li>

关于javascript - jQuery - 导航栏悬停不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39829160/

26 4 0
文章推荐： html - 是否可以相对于字体大小设置字母间距并正确继承？
文章推荐： java - 如何删除textview的滚动？
文章推荐： Android 有意打开任何日历应用程序(4.2.2 及更高版本)
文章推荐： git - 将 Meteor 应用程序部署到 Heroku Meteor v 1.0.2.1