锚定悬停背景颜色按百分比变化

Question

我有一堆所有具有不同背景颜色的链接 - 问题是，是否有一种快速简便的方法，以便当用户将鼠标悬停在这些链接上时，颜色会根据特定百分比变化？即在悬停时它会使背景变暗10％。我想要摆脱的是必须为每种颜色使用指定额外的CSS ......看起来像是一种有效的方式，不仅会使我的css膨胀，还会使我的标记膨胀。

任何帮助表示感谢。

谢谢，

Answer 1

您可以在:hover上显示具有部分透明背景的其他元素：

http://jsfiddle.net/Sec6D/

rgba用于browsers that support it。其他浏览器将使用.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>