CSS Unable to use hover effect on list ID item-CodePudding

I have a Navbar that has a <li> and one of those list items have a ID of Navbar-login-btn. I am able to modify just that ID in the css, however whenever I try to use the :hover function on it; it does not work.

Is there something I am doing wrong here, because I am not sure. Any help would be nice, thank you!

Navbar.jsx:

import '../App.css';
import myAvatar from '../images/avataaars.png'

function Navbar() {
    return(
        <div className='Navbar-container'>
            <img src={myAvatar} className='Nav-logo'/>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Skills</li>
                <li>Projects</li>
                <li id='Navbar-login-btn'>Login</li>
            </ul>
        </div>
    )
}


export default Navbar;

App.css:

.Navbar-container{
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px 40px 10px 40px;
}

.Nav-logo {
    width: 75px;
    height: auto;
}

#Navbar-login-btn {
    border: 2px solid rgb(101, 201, 255);
    border-radius: 20px;
    color: rgb(101, 201, 255);
    cursor: pointer;
}

#Navbar-login-btn:hover {
    color: #fff;
    background-color: rgb(101, 201, 255);
}

.Navbar-container ul{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    font-family: Russo One;
    list-style: none;
    gap: 40px;
}

.Navbar-container li{
    padding: 10px;
}

CodePudding user response：

First, I recommend you use a kebab-case for the CSS property.

example - navbar-container. lowercase with a hyphen.

By the way, you don't have to use an ID to grab the element you want. you can use last-child method.

In your case:

If the Login is the last Element in the list. use this:

// for the navbar
.navbar-container{
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px 40px 10px 40px;
}
// for ul in the navbar
.navbar-container ul{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    font-family: Russo One;
    list-style: none;
    gap: 40px;
}
// for li ul in the navbar
.navbar-container ul li{
    padding: 10px;
}
// for last li ul in the navbar
.navbar-container ul li:last-child {
    border: 2px solid orange;
}

CodePudding user response：

You have same background-color on #Navbar-login-btn & #Navbar-login-btn:hover

Try replacing different color on one of them

Example:

#Navbar-login-btn:hover {
    color: #fff;
    background-color: rgb(15 98 143);//place this new color
}

Playcode: Sample result here