Dani Springer Dani Springer - 1 year ago 90
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



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


.button {
color: red;
background: #3838a5;
.button:hover {
color: white;
background: #3838a5;
.button:active {
color: red;
.button:visited {
color: purple;
background: #3838a5;

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download