CSS; Links with Hover; 2 Link Colours share hover

Question

I have this for my default css which is exactly what I want for the majority of my webpage (RED and then it underlines on hover)

  a:link, a:visited{
      color: #F00;
       text-decoration: none;
   }
   a:hover, a:visited:hover{
      color: #F00;
       text-decoration: underline;
   }

However in some cases I want it to be White and but then still turn red on hover, and I was hoping to override the white on the occasions I need to as it is far less common than the other style.

I tried

a href="/" style="color:#FFF">Home

This overrides the colour for both parts which makes sense for why it is doing it, but I want it to only overwrite the static link and not the on hover.

Any help would be appreciated! Thanks

possible duplicate of [How to write a:hover in inline CSS?](http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) — Rahul Desai, Jan 15 '15 at 10:54

321zeno · Accepted Answer · 2015-01-15T14:17:44.743

You can use a class, take a look at this

article {
  background: #ccc;
  padding: 20px;
}

a:link, a:visited{
  color: #F00;
  text-decoration: none;
}
a:hover, a:visited:hover{
  color: #F00;
  text-decoration: underline;
}

a.white:link, a.white:visited{
  color: #FFF;
  text-decoration: none;
}
a.white:hover, a.white:visited:hover{
  color: #F00;
  text-decoration: underline;
}

<article>
 <p>
  <a href="#">normal</a>
 </p>

 <p>
  <a href="#" class="white">alternate</a>
 </p>
</article>

score 0 · Answer 2 · answered Jan 15 '15 at 10:55

0

Use a class with the color white defined, then apply this class to each anchor that should be white. In CSS...

a.white:link, a.white:visited {
    color:#ffffff;
}

In HTML...

<a href="#" class="white">...</a>

answered Jan 15 '15 at 10:55

Kallum Tanton

802
7
22

roNn23 · Answer 3 · 2015-01-15T11:01:50.247

0

Just use a class for this.

body {
  background: gray;
}
a.whiteLink {
   color: white;
}
a {
   color: #F00;
   text-decoration: none;
}
a:hover {
   color: #F00;
   text-decoration: underline;
}

<a href="/" class="whiteLink">Home</a>

edited Jan 15 '15 at 11:01

answered Jan 15 '15 at 10:56

roNn23

1,532
1
15
32

CSS; Links with Hover; 2 Link Colours share hover

3 Answers3