Joe Fenny
Joe Fenny

Reputation: 225

How do I stop a link changing color on hover?

I have an email link on my page that goes blue when hovered over.

I can't seem to fix this, i don't want it to change at all. In it's CSS i have it as:

.emaillink2
{   text-decoration: none;
color: white;}

a.hover:hover
{   text-decoration: none;
color: white;}

#headerinfo
{
float: right;
font-size: 32px;
color: white;
z-index: 1;
text-align: right;
margin-top: 20px;
text-decoration: none;
}

The div's HTML:

<div id="headerinfo">
Telephone: 07777777777
<br/>
Fax: 07777777777
<br/>
Email: <a href="mailto:[email protected]" class="emaillink2">[email protected]</a>
</div>

However it still changes color when hovered over.

Upvotes: 21

Views: 47202

Answers (3)

chipmunk
chipmunk

Reputation: 970

Say you have 'a' tags with different colours, you may want to try this in that case -

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

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Instead this

a.hover:hover
{   
  text-decoration: none;
  color: white;
}

Use like this.

a:hover
{   
  text-decoration: none;
  color: white;
}

Upvotes: 5

Janaka R Rajapaksha
Janaka R Rajapaksha

Reputation: 3744

Change this code:

.emaillink2
{   text-decoration: none;
color: white;}

to this code:

.emaillink2, .emaillink2:hover
{   text-decoration: none;
color: white;}

Upvotes: 27

Related Questions