CODEWITHSUNDEEP
htmlcss
Josh Gomez
Josh Gomez

Reputation: 15

My CSS Hover and Active styling is not working

Here is my navigation bar as follows:

   <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="portfolio.html">PORTFOLIO</a></li>
    <li><a href="resources.html">RESOURCES</a></li>
    <li><a href="testimonials.html">TESTIMONIALS</a></li>
    <li><a href="about.html">ABOUT</a></li>  
    <li><a href="contact.html">CONTACT</a></li>  
   </ul>
  </nav>

And my CSS:

a: hover {

color: brown;

}

a: active {

color: #1490A5;
}

Im trying to have the active link in one colour and when I hover over it into another colour, its not working unfortunately

Upvotes: 0

Views: 78

Answers (3)

Frankusky
Frankusky

Reputation: 1083

Remove the space between the two dots and the pseudo class

a:hover {

   color: brown;

}

a:active {

   color: #1490A5;
}

Upvotes: 3

Risa__B
Risa__B

Reputation: 462

There should be no space in the css elements, before :active and :hover, your code should be like this : 

a:hover {
 color: brown;
}

a:active {
   color: #1490A5;
}

Upvotes: 0

Ehsan
Ehsan

Reputation: 12951

Remove gap between selector and pesudo:

a: hover {
  ^----------------Remove

a: active
  ^---------------Remove


a:hover {
color: brown;
}

a:active {
color: #1490A5;
} 
<ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="portfolio.html">PORTFOLIO</a></li>
    <li><a href="resources.html">RESOURCES</a></li>
    <li><a href="testimonials.html">TESTIMONIALS</a></li>
    <li><a href="about.html">ABOUT</a></li>  
    <li><a href="contact.html">CONTACT</a></li>  
</ul>

Upvotes: 0

Related Questions