CSS Link Color Not Working

a:hover color is not working

Its a specificity issue; your first selector is overriding the second because it has an ID. Your only option is using an !important rule or including the parent as an ancestor in your second selector so its more specific, e.g.

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

Link text color not changing after being visited

The :visited pseudo-class works on the browser's history. The fact that all three links are being drawn with the black colour means that your browser has visited them in the past. If you were to clear your history, or change the links' urls, you'll find that they aren't classed as 'visited'.

A link to Stack Overflow will probably show as visited in your browser, but a link to Voice of JIHAD probably shows up a different colour (unless you are a member of the Taliban). Clicking on the unvisited link will change its colour to the visited colour - as defined in Stack Overflow's stylesheets - and will remain 'visited' as long as the page exists in your browser's history.

Related Question: How to change the color of hyperlink after click it

Credit to Greg for this answer.

How do I remove the default link color of the html hyperlink 'a' tag?

The inherit value:

a { color: inherit; } 

… will cause the element to take on the colour of its parent (which is what I think you are looking for).

A live demo follows:

a {
  color: inherit;
}

<p>The default color of the html element is black. The default colour of the body and of a paragraph is inherited. This
  <a href="http://example.com">link</a> would normally take on the default link or visited color, but has been styled to inherit the color from the paragraph.</p>

CSS color not working on link

Where your ".button" CSS style is, change it to ".button:link".

---

Related Topics