Anchor hover background colour change by percentage

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 specif开发者_如何学Cy 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,

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>