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

【问题标题】：Anchor hover background colour change by percentage锚点悬停背景颜色按百分比变化
【发布时间】：2011-06-25 17:53:13
【问题描述】：

我有一堆背景颜色不同的链接 - 问题是，有没有一种快速简便的方法，当用户将鼠标悬停在这些链接上时，颜色会根据特定百分比发生变化？ IE。悬停时它会使背景变暗 10%。我试图摆脱的是必须为所使用的每种颜色指定额外的 CSS...似乎是一种有效的方式，不仅会使我的 CSS 膨胀，而且我的标记也会膨胀。

任何帮助表示赞赏。

谢谢，

【问题讨论】：

问题jQuery and colour calculation的已接受答案已经回答。

标签： jquery html css

【解决方案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>

【讨论】：