A: hover color does not work

Question

very strange thing.

I want to change the color of the text and the background color of the links on hover.

this is code

CSS

#link-menu a { color:white; display:block; height:100%; width: 100%; text-decoration:none; text-align:center; line-height:45px; font-weight:bold; font-family:"trebuchet ms","comic sans ms"; outline:none; } .link2 a:hover { color:black; background:white; } 

doesn’t mean the guidance is not working. the background color changes, but the text color does not change.

Another important fact is that if I use id instead of using the .link2 class, the color also changes. The problem is only using the class. Can someone explain the reason and solution?

Note. I do not want to use the parent id. because I don’t want to change the background of all links.

Answer 1

His problem is specificity ; your first selector overrides the second as it has an identifier. The only option is to use the !important rule or to include the parent as the ancestor in the second selector, so its more specific, for example

 #link-menu a:hover { background: white; color: black; } 

Answer 2

#link-menu a more specific than .link2 a:hover , because the first includes the identifier, and the second does not.

Therefore, it redefines the properties in the second rule.

To fix this, change them so that they have the same specificity (before :hover ) or add !important .

Answer 3

 #link-menu a 

has a higher priority. You need to increase the priority of the second selector. Try to add! Important

 .link2 a:hover { color:black !important; background:white; }