在现代 CSS 中悬停时更改为相对颜色

Question

我想对悬停在链接上做出反应：

/* mouse over link */
a:hover {
    text-decoration: none ;
    border-bottom: 1px dotted ;
}

...稍微改变文本周围的背景颜色。我不想指定某种颜色，我只想使当前设置的继承颜色变亮或变暗。对于hover和active在链接上，我希望改变背景颜色，以提供按下按钮的效果。

我希望能够更改文本或页面的背景颜色，而不必更改a:hover规则中的特定颜色。

Answer 1

您可以使用，尽管您还必须指定主体背景和待filter: brightness()背景上的特定颜色。默认值是并且不能变暗。需要改为ainheritbackground-colortransparentinherit获得特定颜色，以便变暗可以起作用。如果是透明的，则 alpha 为 0，并且不会变暗或变亮。

但是，如果链接位于 a 内部div并且div没有特定的背景颜色，则它将是透明的，并且链接将继承该背景颜色。因此，链接需要有特定的背景颜色才能变暗。

我做了一个在开发人员控制台中选择的位置，结果是，window.getComputedStyle($0)["background-color"]意思是透明。$0div"rgba(0, 0, 0, 0)"

body { background: white }

a { background: inherit; border-radius: 2px }

a:hover {
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    filter: brightness(.8);
}

<a href="http://www.google.com">Google</a>