#id:hover selector doest work

#id:hover selector doest work
0

#1

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


#2

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


#3


Here is the link


#4

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;
}