jquery - anchor 悬停背景颜色按百分比变化

Question

我有一堆背景颜色不同的链接 - 问题是，有没有一种快速简便的方法，当用户将鼠标悬停在这些链接上时，颜色会根据特定百分比发生变化？ IE。悬停时，它会使背景变暗 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>