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

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

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

…稍微改变文本周围的背景色。我不想指定特定的颜色，只想将继承的颜色设置为当前设置的任何颜色变亮或变暗。对于链接上的

悬停

和

活动

，我希望更改背景颜色，以提供按钮被按下时的某种效果

---

我希望能够更改文本或页面的背景颜色，而不必更改

a:hover

规则中的特定颜色。

您可以使用

filter:brightness（）

，不过您还必须在

a

的主体背景和背景上指定特定颜色，以便

继承
。
背景色
的默认值为
透明
，不能变暗。需要将其更改为
inherit
，以获得特定的颜色，以便进行变暗。如果是透明的，则alpha为0，并且不会变暗或变亮

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

我做了一个
窗口。getComputedStyle（$0）[“背景色”]
，其中
$0
是开发人员控制台中选择的
div
，结果是
“rgba（0，0，0，0）”
，意思是透明的


body{背景：白色}
a{背景：继承；边界半径：2px}
a:悬停{
文字装饰：无；
边框底部：1px点#ccc；
滤镜：亮度（.8）；
}
到目前为止，仅使用css是不可能做到这一点的。您可以使用SASS之类的预处理

然后，您可以使用
filter
规则移动色调

最后，可能是您想要的，在工作中有
color-mod（）
规则，但我最近没有听说过

参考：


PS：我确实记得有时会使用：


a{
背景：rgba（255,0,0,1）；
}
a:悬停{
背景：rgba（255,0,0,8）；
}
div{
显示：内联块；
背景：黑色；
}
div+div{
背景：白色；
}
让我停下来，变暗
悬停我，减轻< <代码> >你可以考虑一个额外的层以上的背景，你应用白色或黑色着色，使背景更浅或更暗：


a{
显示：内联块；
填充：10px；
颜色：#fff；
位置：相对位置；
z指数：0；
}
瑞德先生{
背景：红色；
}
蓝先生{
背景：蓝色；
}
格林先生{
背景：绿色；
}
.莱特：之前，
.黑暗：以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（255255,0.3）；
不透明度：0；
}
.黑暗：以前{
背景：rgba（0,0,0,0.3）；
}
a:悬停：：之前{
不透明度：1；
}

SCS可以进行颜色的加亮或变暗，因此您可以说“加亮（$color，.2）”将颜色加亮20%。您可以将背景颜色设置为原始颜色的不同加亮或变暗百分比，以保持悬停和背景之间的比率一致。有关SCS的更多信息，请访问：。或者你可以使用CSS变量：@NathanielFlick谢谢你的提示。如果可能的话，我希望用直接的CSS来实现。CSS没有颜色函数，但它有颜色变量。SASS编译为CSS，因此基本上是一样的您可能希望看到
过滤器：亮度（）
，尽管这会改变文本的颜色而不是背景色。@k-a-v对于链接上的
悬停
和
活动
，我希望背景色改变，为了给按钮带来某种效果。使用SASS的预处理只输出CSS，因此完全可以单独使用CSS。@Rob，在页面中使用JS也会在那里使用CSS。。。关键是，您必须执行一些额外的开销才能使其正常工作，这与将开箱即用的
color-mod（）
函数不同。