Adjust the Hover State of an Anchor Tag - Problem!

Tell us what’s happening:

Hi guys. I’ve successfully added the :hover pseudo-class. I’ve also done what it’s asked me to do with regards to changing the colour (UK spelling :wink:) and I think it’s correct, but when I press ‘Run the Tests’, only the former change (adding :hover) passes the test.

I’ve looked at a similar question asked by another user about this exact topic. He was having the exact same problem as me. When he completed the task on his/her IPad, however, it passed. But I don’t have a tablet at the moment, unfortunately. I had a Kindle but it no longer works. What do I do? Can you confirm that my code is correct? Is there a problem with this particular task on freeCodeCamp’s end? Any help would be really appreciated.

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 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

Hi Randelldawson, thanks very much for your help. I’ve reset the code and added :hover (so it looks like a:hover). It still doesn’t work.

After pressing the button to reset all code, this is the code that comes up (below). Please tell me if there should be more:

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

I was just about to change it before I saw it change in front of me. Thanks for that, I appreciate it. I will take note for future reference.

This is the text after I’ve input what I think needs to be input. I’ve deleted the “#000” and replaced it with “blue”:

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

You’re right. I pressed to reset the code, but this appears each time. What can I do?

I didn’t mean to delete my previous post, I meant to edit it.

This is what I now have. Do you replace the “color: #000;” with “color: blue;” or do you add the blue to the #000?

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

The above one doesn’t work when I press to test the code, nor does this:

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

The browser I am using is Google Chrome.

I’ve tried everything and I think we’ve both found the right answer, but for some reason this particular lesson won’t ‘run the test’ successfully. I’m using Google Chrome and I can’t think why. I’ve seen another topic in these forums posted by somebody with the same problem. He was able to resolve it by completing the lesson in his Apple IPad. :disappointed:

Here’s the topic: Adjust the Hover State of an Anchor Tag - what’s wrong?

A screenshot of what I’m seeing after running the test:

Hi,

You have correctly used the hover styling, however, you code is not yet correct to pass the challenge.

I think it might help if I re-write the challenge a bit for you:

  • Add a rule so that when the user hovers over the a tag, the color is blue.
  • Do not change any of the code that is already there
<style>
  a {
    color: #000;
  }
  // add you hover styling below here
  
  
  // add you hover styling above here
</style>
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>

Once you add your hover code in the right place above, you should pass all the tests.

Hope this helps :slight_smile:

1 Like

Why do you keep deleting the original part of the code which defined the anchor? The original anchor definition is as follows:

  a {
    color: #000;
  }

Do not delete this line above from your code and make sure you only ADD the new pseduo-class hover below the line above.

1 Like

below is the solution
a{
color: #000;
}
a:hover{
color:blue;
}

2 Likes

Try It;
Dont forget to set default color of link to black !

a { color: black; } a:hover { color: blue; }

CatPhotoApp

2 Likes

I had to use chromium to pass this test, as firefox wouldn’t work (a stays blue with color: #000 or color: black)