Anchor hover background colour change by percentage

Question

I have a bunch of links all with different background colours - question is, is there a quick and easy way so that when a user hovers over these links that the colour changes based on a paticular percentage? I.e. on hover it makes the background 10% darker. What i'm trying to get away from is having to specify additional CSS for each and every colour being used... seems like an effecient way that will not only bloat my css but also my markup.

Any help appreciated.

Thanks,

It's already answered on the accepted answer of the question [jQuery and colour calculation](http://stackoverflow.com/questions/4241618/jquery-and-colour-calculation). — Shef, Jun 25 '11 at 18:00

score 1 · Answer 1 · answered Jun 25 '11 at 18:03

You could show an additional element with a partially transparent background on :hover:

http://jsfiddle.net/Sec6D/

rgba is used for browsers that support it. Other browsers will use the .png.

a {
    background: red;
    float: left;
    color: #fff
}
a span {
    display: block
}
a:hover span {
    background: url(semi-transparent-black.png);
    background: rgba(0,0,0,0.2);
}

<a href="#"><span>Link 1</span></a>

Anchor hover background colour change by percentage

1 Answers1