Hover not working properly on topnav (CSS)-CodePudding

I came across a problem on my HTML file. I'm fairly new to HTML, and as I was making a topbar for my static website here, I tried to add a hover to it, but it isn't working correctly, only at the "search" and "cart" buttons (and it kinda works at "contact us" too, but only at its right side) .

So, I'm not sure why the hovering doesn't work on all buttons, even though the topbar looks ok at first glance. Am I overriding something I shouldn't? This got me confused. Here's the code:

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

CodePudding user response：

Your element with the ID of "container" is overlaying your navigation buttons. It's not to do with your hover logic.

You need to adjust your layout so container no longer sits on top, as mouse events only propagate to the topmost element.

Assuming container is for holding your "Bunny Shop" header. I would suggest adjusting the height of this element. You will probably find that it doesn't need to use the "fixed" positioning, and can sit relative to it's parent component. Fixed sits an element absolutely, relative to the viewport itself.

CodePudding user response：

Your container element overlap the topbar or navigation item due to you fixed the container. chnage your code from

        #container {
            margin-left: 27px;
            margin-top: 41px;
            position: fixed; // remove it.
            color: white;
            font-family: "Cute Aurora Regular";
         }

         #container {
                margin-left: 27px;
                margin-top: 41px;
                color: white;
                font-family: "Cute Aurora Regular";
         }

Now you can hover navigation.

CodePudding user response：

Two quick and lazy solutions are to add the following to the #topBox div:

pointer-events: none; will allow you to click "though" the div to the navbar
height: auto; will prevent the div from overlapping the navbar

The reason the rollover isn't working as expected is the #container & #containerBunny divs are covering the topnav div.

You can see the overlapping divs here

I recommend adding the Pesticide Chrome extension to help visualise your divs and make it easier to see what's going on.