Adjust the Hover State of an Anchor Tag - Problem!

Adjust the Hover State of an Anchor Tag - Problem!
0

#1

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


#2

The problem is you deleted the original definition for the anchor selector. Reset the Code for this challenge to get back the original code and then try adding the hover pseudo-class.


#3

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>

#4

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Can you now post all of the code, so I can see it all together?


#5

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>```

#6

The code you just posted is still missing the original anchor selector definition, plus the opening <style> tag.


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

#8

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


#9

When you click the Reset All Code button, you should get the following:

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

Just copy and paste the above and replace all the code you currently have and then add the hover pseudo-class.

Also, make sure you are using a modern browser such as Chrome which works the best with the FCC curriculum. Other browsers may or may not work as they should, because FCC uses various JavaScript and CSS features that Chrome can take advantage of.


#11

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>```

#12

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.


#13

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:


#14

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


#15

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


#16

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:


#17

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.


#18

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


#19

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

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

CatPhotoApp