CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 8531

color:none; alternative

I have a link where its text colour will be applied via either .light or .dark. This link also has a text colour applied on it when hovered over which I cannot remove style (but I can modify it). I want the colour of the text to not change when the user hovers over the link.

http://jsfiddle.net/nCt58/1/

<h2><a href="resume" class="light">Resume</a></h2>

a:hover { color:#ff0000; } //cannot remove this style
.light { color:#888; }
.dark { color:#000; }

Upvotes: 2

Views: 89

Answers (4)

user1003757
user1003757

Reputation: 41

Use the same color for the hover state as the normal state. Like so:

.light, a.light:hover{ color:#888}
.dark, a.dark:hover { color:#000; }

Upvotes: 1

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50573

You could do:

a:hover { color:#222222 !important; }

Given #222222 it's the normal color when not hovered.

Upvotes: 1

Blender
Blender

Reputation: 298246

Just add another selector to override a:hover:

.light, .light:hover { color:#888; }

Demo: http://jsfiddle.net/nCt58/4/

Upvotes: 5

Rayshawn
Rayshawn

Reputation: 2617

You could just use the !important property.

.light {color:#888 !important;}

Upvotes: 1

Related Questions