HTML-悬停在topnav(CSS)上不能正常工作-堆栈溢出

顺晟科技

2022-10-19 12:22:16

241

我在HTML文件上遇到了一个问题。我对HTML相当陌生，当我为静态网站在这里制作topbar时，我试图为它添加一个悬停按钮，但它不能正常工作，只能在“搜索”和“购物车”按钮（它也可以在“联系我们”按钮工作，但只能在它的右侧）。

所以，我不知道为什么悬停不能在所有按钮上工作，尽管topbar乍一看看起来很好。我是不是凌驾于我不该做的事情之上了？这让我很困惑。下面是代码:

<!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>
        #topBox {
            height: 250px;
            margin-top:-50px;
            margin-left: auto;
            margin-right: auto;
            background: #cbe9f3;
            border-radius: 15px;
        }
        #container {
            margin-left: 27px;
            margin-top: 41px;
            position: fixed;
            color: white;
            font-family: "Cute Aurora Regular";
        }
        


        .topnav {
            overflow: hidden;
            font-family: "Cute Aurora Regular";
            background-color: transparent;
            border: #c9c7c7 0.1px solid;
            margin-top: 5px;
            margin-left: auto;
            margin-right: auto;            
            border-left: none; 
            border-right: none; 

            }

            .topnav a {
            float: left;
            color: #b47d50;
            text-align: center;
            margin-left: 27px;
            padding: 14px 16px;
            margin-right: -20px;
            text-decoration: none;
            font-size: 19px;
            font-weight: bold;
            }

            .topnav a:hover {
            color: #ecb2ad;
            }
            
            .topnav a.search {
                margin-left: 290px;
            }   

            .topnav a.cart {
                margin-left: 25px;
            }   

        br {
            display:none;
        }

        /* Desktop grande */
        @media (min-width: 1025px) {
            #topBox {
                width:1000px;
            }
            #container {
                font-size: 600%;
            }
            #containerBunny {
                width: 250px;
                margin-left: 550px;
                margin-top: 150px;
            }
            .topnav {
                width: 1000px;
            }

        }

        /* Desktop pequeno */
        @media (min-width: 769px) and (max-width: 1024px) {
            #topBox {
                width:750px;
            }
            #container {
                font-size: 500%;
            }
            #containerBunny {
                width: 200px;
                margin-left: 460px;
                margin-top: 170px;
            }
            .topnav {
                width: 745px;
            }
        }

        /* Tablets */
        @media (min-width: 481px) and (max-width: 768px) {

        }

        /* Mobile */
        @media (min-width: 320px) and (max-width: 480px) {
            #topBox {
                width:1000px;
            }
            #container {
                font-size: 520%;
            }
            #containerBunny {
                width: 250px;
            }
            br {
                display: block;
            }
        }

    </style>
</head>

<body>
    <div id="topBox">
        <div id="container">
            <p>Bunny <br>Shop</p>
        </div>
        <img id="containerBunny" src="images/molangMilk.png" alt="">
    </div>

        <div class="topnav">
            <a href="#home">HOME</a>
            <a href="#new">NEW</a>
            <a href="#sale">SALE</a>
            <a href="#products">PRODUCTS</a>
            <a href="#contactUs">CONTACT US</a>
            <a class="search" href="#search">SEARCH</a>
            <a class="cart" href="#cart">CART</a>
          </div>


</body>

</html>

顺晟科技：

两个快速和延迟的解决方案是向div添加以下内容:

将允许您单击“通过”div到navbar
将防止div与navbar重叠

滚动没有按预期工作的原因是&div覆盖了div。

您可以在这里看到重叠的div

我建议添加农药Chrome扩展名，以帮助可视化您的div并更容易看到发生了什么。

您的容器元素与topbar或导航项重叠，这是由于您修复了容器。从

开始使用您的代码

<!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>
        #topBox {
            height: 250px;
            margin-top:-50px;
            margin-left: auto;
            margin-right: auto;
            background: #cbe9f3;
            border-radius: 15px;
        }
        #container {
            margin-left: 27px;
            margin-top: 41px;
            position: fixed;
            color: white;
            font-family: "Cute Aurora Regular";
        }
        


        .topnav {
            overflow: hidden;
            font-family: "Cute Aurora Regular";
            background-color: transparent;
            border: #c9c7c7 0.1px solid;
            margin-top: 5px;
            margin-left: auto;
            margin-right: auto;            
            border-left: none; 
            border-right: none; 

            }

            .topnav a {
            float: left;
            color: #b47d50;
            text-align: center;
            margin-left: 27px;
            padding: 14px 16px;
            margin-right: -20px;
            text-decoration: none;
            font-size: 19px;
            font-weight: bold;
            }

            .topnav a:hover {
            color: #ecb2ad;
            }
            
            .topnav a.search {
                margin-left: 290px;
            }   

            .topnav a.cart {
                margin-left: 25px;
            }   

        br {
            display:none;
        }

        /* Desktop grande */
        @media (min-width: 1025px) {
            #topBox {
                width:1000px;
            }
            #container {
                font-size: 600%;
            }
            #containerBunny {
                width: 250px;
                margin-left: 550px;
                margin-top: 150px;
            }
            .topnav {
                width: 1000px;
            }

        }

        /* Desktop pequeno */
        @media (min-width: 769px) and (max-width: 1024px) {
            #topBox {
                width:750px;
            }
            #container {
                font-size: 500%;
            }
            #containerBunny {
                width: 200px;
                margin-left: 460px;
                margin-top: 170px;
            }
            .topnav {
                width: 745px;
            }
        }

        /* Tablets */
        @media (min-width: 481px) and (max-width: 768px) {

        }

        /* Mobile */
        @media (min-width: 320px) and (max-width: 480px) {
            #topBox {
                width:1000px;
            }
            #container {
                font-size: 520%;
            }
            #containerBunny {
                width: 250px;
            }
            br {
                display: block;
            }
        }

    </style>
</head>

<body>
    <div id="topBox">
        <div id="container">
            <p>Bunny <br>Shop</p>
        </div>
        <img id="containerBunny" src="images/molangMilk.png" alt="">
    </div>

        <div class="topnav">
            <a href="#home">HOME</a>
            <a href="#new">NEW</a>
            <a href="#sale">SALE</a>
            <a href="#products">PRODUCTS</a>
            <a href="#contactUs">CONTACT US</a>
            <a class="search" href="#search">SEARCH</a>
            <a class="cart" href="#cart">CART</a>
          </div>


</body>

</html>

至

<!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>
        #topBox {
            height: 250px;
            margin-top:-50px;
            margin-left: auto;
            margin-right: auto;
            background: #cbe9f3;
            border-radius: 15px;
        }
        #container {
            margin-left: 27px;
            margin-top: 41px;
            position: fixed;
            color: white;
            font-family: "Cute Aurora Regular";
        }
        


        .topnav {
            overflow: hidden;
            font-family: "Cute Aurora Regular";
            background-color: transparent;
            border: #c9c7c7 0.1px solid;
            margin-top: 5px;
            margin-left: auto;
            margin-right: auto;            
            border-left: none; 
            border-right: none; 

            }

            .topnav a {
            float: left;
            color: #b47d50;
            text-align: center;
            margin-left: 27px;
            padding: 14px 16px;
            margin-right: -20px;
            text-decoration: none;
            font-size: 19px;
            font-weight: bold;
            }

            .topnav a:hover {
            color: #ecb2ad;
            }
            
            .topnav a.search {
                margin-left: 290px;
            }   

            .topnav a.cart {
                margin-left: 25px;
            }   

        br {
            display:none;
        }

        /* Desktop grande */
        @media (min-width: 1025px) {
            #topBox {
                width:1000px;
            }
            #container {
                font-size: 600%;
            }
            #containerBunny {
                width: 250px;
                margin-left: 550px;
                margin-top: 150px;
            }
            .topnav {
                width: 1000px;
            }

        }

        /* Desktop pequeno */
        @media (min-width: 769px) and (max-width: 1024px) {
            #topBox {
                width:750px;
            }
            #container {
                font-size: 500%;
            }
            #containerBunny {
                width: 200px;
                margin-left: 460px;
                margin-top: 170px;
            }
            .topnav {
                width: 745px;
            }
        }

        /* Tablets */
        @media (min-width: 481px) and (max-width: 768px) {

        }

        /* Mobile */
        @media (min-width: 320px) and (max-width: 480px) {
            #topBox {
                width:1000px;
            }
            #container {
                font-size: 520%;
            }
            #containerBunny {
                width: 250px;
            }
            br {
                display: block;
            }
        }

    </style>
</head>

<body>
    <div id="topBox">
        <div id="container">
            <p>Bunny <br>Shop</p>
        </div>
        <img id="containerBunny" src="images/molangMilk.png" alt="">
    </div>

        <div class="topnav">
            <a href="#home">HOME</a>
            <a href="#new">NEW</a>
            <a href="#sale">SALE</a>
            <a href="#products">PRODUCTS</a>
            <a href="#contactUs">CONTACT US</a>
            <a class="search" href="#search">SEARCH</a>
            <a class="cart" href="#cart">CART</a>
          </div>


</body>

</html>

现在可以悬停导航了。

ID为“容器”的元素覆盖了导航按钮。这与您的悬停逻辑无关。

您需要调整布局，使容器不再位于顶部，因为鼠标事件只传播到最顶部的元素。

假设容器是用来存放你的“兔子商店”头部的。我建议调整这个元素的高度。您可能会发现，它不需要使用“固定”定位，可以相对于其父组件放置。Fixed相对于视口本身绝对地放置一个元素。

上一篇：html-“text-underli 下一篇：html-dead Center导航

网站建设

Html

HTML-悬停在topnav(CSS)上不能正常工作-堆栈溢出