Why is it that the ':hover' pseudo-class stops working-CodePudding

Normally when I use the ':hover' pseudo-class, it works perfectly fine when I use it on buttons. This is my code:

header {
    position: absolute;
    top: 0vw;
    left: 0vw;
    width: 100%;
    padding: 30px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 2vw;
    font-weight: 700;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
}
header ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
header ul li {
    list-style: none;
    margin-left: 20px;
    font-size: 1.5vw;
}
header ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: #fff;
    border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
    background: #fff;
    color: rgb(24, 55, 96);
}

<header>
    <p >Name</p>
    <ul>
    <li><a href="#" >Quick Link 1</a></li>
    <li><a href="#">Quick Link 2</a></li>
    <li><a href="#">Quick Link 3</a></li>
    <li><a href="#">Quick Link 4</a></li>
</ul>
</header>

I did try giving the tags classes and replacing the header ul li a:hover but that did not work either. Sometimes when I link the stylesheet to the HTML code. It would take about an hour for it to connect. But for this case, everything else declared in the stylesheet works except for the :hover pseudo-class. I inspected the code and was not able to find

header ul li a:hover {
    background: #fff;
    color: rgb(24, 55, 96);
}

CodePudding user response：

i try this code, and working

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        header {
            position: absolute;
            top: 0vw;
            left: 0vw;
            width: 100%;
            padding: 30px 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 2vw;
            font-weight: 700;
            text-decoration: none;
            color: white;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        header ul {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header ul li {
            list-style: none;
            margin-left: 20px;
            font-size: 1.5vw;
        }
        header ul li a {
            text-decoration: none;
            padding: 6px 15px;
            color: #fff;
            border-radius: 20px;
        }
        /* header>ul>lia:hover{            
            background: whitesmoke;
            color: rgb(24, 55, 96);
        } */

        header ul li a:hover,        
        header ul li a.active {
            background: red;
            color: rgb(24, 55, 96);
        }
    </style>
    <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>
</head>
<body>
    <header>
        <p >Name</p>
        <ul>
            <li><a href="#" >Quick Link 1</a></li>
            <li><a href="#">Quick Link 2</a></li>
            <li><a href="#">Quick Link 3</a></li>
            <li><a href="#">Quick Link 4</a></li>
        </ul>
    </header>
</body>
</html>

CodePudding user response：

Please implement like that:

header ul li a:active,
header ul li a:link,
header ul li a:hover,
header ul li a:visited {
    background: #fff;
    color: rgb(24, 55, 96);
}

The reason is for example if the anchor already clicked it will inherit the :visited styling and your :hover could be ommited.

If you overwrite all the active, link, hover, visited you will achive the behavior you would like.