This is a cool CSS effect to use with links. We can create a link that will change to two different colors when you hover over it.
In order to achieve this effect, we use span tags in the links and our CSS will look like this:
a.twocolors span.red {
color: #000;
text-decoration: none;
}
a.twocolors:hover span.red {
color: #FF0000;
text-decoration: none;
}
a.twocolors span.blue {
color: #000;
text-decoration: none;
}
a.twocolors:hover span.blue {
color: #0000FF;
text-decoration: none;
}and then our HTML will look like this:
<a class="twocolors" href="#">
<span class="red">Hover</span><span class="blue">Here!</span>
</a>Our final effect can look like this:
With this effect you can create links with all different colors on hover and you can use CSS3 transitions to build upon this effect even further! Ask any questions below!
