CODEWITHSUNDEEP
htmlcsshyperlinkhover
Blackstone
Blackstone

Reputation: 103

HTML/CSS: no text change when hovering over a link

I want to create a hyperlink that doesn't change the text when I hover over it. I've created a special style for that type of link as follows:

a.blank:hover{
    text-decoration:none;}

and the link itself:

<a class="blank" id="asdf">asdf</a>

I also have a general hyperlink style:

 a:hover, a:active {
text-decoration: none;
color: #321dd3; }

I know I could get around it by defining the text colour as being the same, but is there an umbrella method to force the hyperlink not to change anything?

Upvotes: 0

Views: 1819

Answers (1)

Mooseman
Mooseman

Reputation: 18891

There are libraries such as reset.css (And more like it) that will remove these styles, but that may affect other parts of your page. It's best to use

a:hover, a:active {
  text-decoration: none;
  color: inherit; 
}

You will also need to add a{text-decoration: none;} and define the color property (That's what's inherited) for its parent element.

Fiddle: http://jsfiddle.net/VhCf8/

Upvotes: 7

Related Questions