#id:hover selector doest work

HTML

<header>
    <div class="logo">
      <img src="#" id="header-img" alt="airbnb logo">
    </div>
    <nav id="nav-bar">
      <ul style="list-style: none" >
        <li><a href="#home" class="nav-link">Home</a></li>
        <li><a href="#services" class="nav-link">Services</a></li>
        <li><a href="#features" class="nav-link">Features</a></li>
        <li><a href="#pricing" class="nav-link">Pricing</a></li>
        <li><a href="#team" class="nav-link">Team</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
        **<li><a href="login" id="login">Try it free</a></li>**
**      </ul>**
    </nav>
   </header>

CSS

header{
  position: fixed;
  background-color: white;
  top:0;
  height: 75px;
  padding: 0 70px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
ul{
  display: flex;
  justify-content: flex-start;
}
li{
  padding: 0 15px;
}
a{
  text-decoration: none;
}

#login{
  position : absolute;
  margin-left: 300px;
  border:1px solid #fff;
  border-radius: 2em;
  padding: 5px 20px;
  color: white;
  background-color: #ff4d4d;   
}

when I trynna add a new css rule for when I hover over the link with the id =“login” it doesnt work Plz tell me why and them sae thingd with 2 other links in my webpage

Can you share a codepen link so that we can tinker with it?


Here is the link

If you want to add css rules for hover you need to use pseudo class.

In this case you would do something like…

#login:hover {
  color:black;
}