Dani Springer Dani Springer - 4 months ago 9
CSS Question

CSS Link/Hover Not Working

I have a button, and text should be white for regular and hover, and light blue for active.

But it shows purple.

Edit: I tried viewing it on incognito (which would remove the "visited" thing) and it appears in

background
color.

HTML:

<a href="example.com" style="text-decoration:none" class="button">text</a>


CSS:

<style>
.button {
text-decoration:none;
color: red;
background: #3838a5;
}
.button:hover {
color: white;
background: #3838a5;
}
.button:active {
color: red;
background:#3838a5;
}
.button:visited {
color: purple;
background: #3838a5;
}
</style>

Answer

If .button is an <A> tag as your CSS suggests you might want to provide styling for the "visited" pseudo class.

See: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:visited


Additional Information

The cascading nature of CSS means that the style's order does matter.
Once a URL has been visited, the ":visited" styles will apply.
When you hover over the link, those styles will apply as well.
The priority in which they apply will depend on the order they are in your style sheet.

Note: If you want ":hover" to be dominant (even after visited happens, it should be defined below :visited.