Text color is not changing when hovering over it ... please help

1

hi all

I came back to my first freecodecamp challenge to do some changes but i am facing a weird problem.

What is wrong with my last line with element p and a…

The last line doesnt show on jsfiddle and the text color doesnt change when i hover over it, only the background color changes.

I am wondering what mistake is there because on my other webpages it works just fine.

below is the link

Edit fiddle - JSFiddle - Code Playground

1 Like
2

Hi @Hisoka,

Your 'tribute-link ’ id selector is the problem by looks of it. I have changed it to a:link and it seems to work.

I am a newbie, so I might not explain it correctly and someone might come along to correct me, however the way how I understand it is that ids have the highest priority. By giving ‘tribute-link’ an id selector, CSS will ignore the a:hover instruction for colour because it has lower priority. By removing higher priority selector and replacing it with a:link, CSS will change the colour of your text on hover because it is no longer overwritten by the first selector.

I hope this helps :slight_smile:

2 Likes
3

^Correct. That or the other way. Increase the specificity of the hover selector.

I will say unless the link style is supposed to be global for all links I would not suggest using an element selector and would use a class instead. I don’t suggest using ids for styling, they have too high specificity which can cause issues in the long run (for larger projects at least).

a {
  /* global for all links */
  text-decoration: none;
}

.tribute-link {
  color: green;
}

.tribute-link:hover {
  color: blue;
  background: green;
}
2 Likes
4

Why i cant see the last line in jsfiddle.net

screenshot
screenshot1914×905 273 KB

5

@lasjorg @trix19
thanks. i guess that the only solution. the reason id is there because of the requirement of the challenge. I thought that would be the reason. I wonder if there is a way to ovewrite the priority of Id if i want the hover to work

6

You don’t have to use the ids for styling, they are just needed for the tests. Just give the element both and only use the class for CSS styles.

Not sure what you are asking here?

1 Like
7

Hi @Hisoka,

At the top right corner of your editor, you have ‘Settings’. Change the ‘Editor layout’ from ‘Classic’ to 'Right results ’ and you will be able to see your last line. :slight_smile:

1 Like
8

Thanks for the help :v:

9

sure. i will do that. :smiley: i am doing that in the other projects.