Adjust the Hover State of an Anchor Tag

Tell us what’s happening:

The anchor tag color should remain black, only add CSS rules for the :hover state.
The anchor tag should have a color of blue on hover.
// tests completed

Your code so far

a :hover{ color:#000; color: blue; }

CatPhotoApp


<style>
  a {
    color:#000;
  }
  
  
  
</style>
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag

You can only have one for each property in a block. So you can’t have two color props.

Take a look a the examples lower in this page to guide you :hover - CSS: Cascading Style Sheets | MDN

3 Likes

thx Mr.mendez :slight_smile: , i’m going right now to the link

a { color:#000; } a :hover { color: blue; }

CatPhotoApp

it still does’nt work

Hi @marouane1987,

You should put your hover inside style tag <style> </style> like this:

<style>
  a {
    color: #000;
  }
  
  a:hover{
    color:blue;
  }
  
</style>

Good luck and have a happy coding.

Regards,
Ali Mosaad

4 Likes

You have a space between the a and :hover, and you must not

3 Likes

it does’nt work , maybe it’s a bug in the website ??

a { color: #000 ; } a:hover { color: blue ; }

CatPhotoApp

it’s ok , it works now thx everybody

1 Like

Good luck @marouane1987 and have a happy coding.

image
[/quote]

Hello. Sorry, but this is so simple and I cannot see what am I doing wrong.

add this below the existing CSS code:

a:hover {
          color: red;
      }

It apparently worked when I reloaded the page.

not working for me, is this a bug ?

I have the same problem with FireFox,
Solved by switching Chrome in this question.