Something very peculiar...
I'm looking to modify the text color and background color of the links when they are hovered over.
Here's the code snippet:
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;
}
The hover effect is working, the background color changes but the text color remains the same.
Another important point to note is that if I use an id instead of a class like .link2, the text color changes as well. The issue seems to be with using classes only. Can someone please elaborate on the reason and provide a solution?
Note: I prefer not to use the parent element id, as I only want to change the background color of specific links.