How to make multiple links function with different CSS-Styles?

Question

I am having trouble creating a link (a href) where certain characters show up in different colors but function as one link!

I tried to think creative and came up with the following codes.

HTML:

<a href="#" class="char1"> T </a>
<a href="#" class="char2"> E </a>
<a href="#" class="char3"> S </a>
<a href="#" class="char4"> T </a>

CSS:

a.char1:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:hover {color:blue; font-size:13pt; text-decoration:none;}

a.char2:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:hover {color:red; font-size:13pt; text-decoration:none;}

a.char3:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:link {color:green; font-size:13pt; text-decoration:none;}

a.char4:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:hover {color:yellow; font-size:13pt; text-decoration:none;}

But then of course they won't function as a single link...

So again to simplify my question I want to create a href where all 'four' characters (T, E, S, T) show in diffrent colors when being hovered (a.char:hover).

"despite the fact only one character is hovered in this case"

thanks in advance!

Use a single link which contains multiple span elements each with a separate character / styles — Paulie_D
– Paulie_D, Commented Feb 17, 2015 at 19:44
You could put each letter in a span like this codepen.io/anon/pen/azYdoE — Justin Breiland
– Justin Breiland, Commented Feb 17, 2015 at 19:44
you can have random colors too using some JS code -- stackoverflow.com/questions/20228961/… — Tasos
– Tasos, Commented Feb 17, 2015 at 19:56

Ted · Accepted Answer · 2015-02-17 19:51:15Z

Like so--put the text into spans within the anchor tag:

 body {
   background-color: #656565;
 }
 a:link .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char1 {
   color: blue;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char2 {
   color: red;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char3 {
   color: green;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char4 {
   color: yellow;
   font-size: 13pt;
   text-decoration: none;
 }

<a href="#">
  <span class="char1">T</span>
  <span class="char2">E</span>
  <span class="char3">S</span>
  <span class="char4">T</span>
</a>

Akilsree1 · Accepted Answer · 2015-02-17 20:09:55Z

0

you have to give hover for char 3 also.

HTML:

 <a href="#">
<span class="char1">T</span>
<span class="char2">E</span>
<span class="char3">S</span>
<span class="char4">T</span>
</a>

CSS:

a:link  .char1 .char2 .char3 .char4
{color:#fff; font-size:13pt; text-decoration:none;}

a:visited .char1 .char2 .char3 .char4
{color:#fff; font-size:13pt; text-decoration:none;}

a:active .char1 .char2 .char3 .char4
{color:#fff; font-size:13pt; text-decoration:none;}

a:hover .char1 {color:blue; font-size:13pt; text-decoration:none;}
a:hover .char2 {color:red; font-size:13pt; text-decoration:none;}
a:hover  .char3{color:green; font-size:13pt; text-decoration:none;}
a:hover  .char4{color:yellow; font-size:13pt; text-decoration:none;}

answered Feb 17, 2015 at 20:09

Akilsree1

4621 gold badge4 silver badges26 bronze badges

1 Comment

Catnipp Over a year ago

Thanks for the quick reply helped me allot!

Collectives™ on Stack Overflow

How to make multiple links function with different CSS-Styles?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related