在运行时变暗继承的文本颜色？

Question

假设我有一个继承文本颜色的元素：

element { color: inherited}

我也希望在hover：

上使其变暗

element:hover { color:darker(10%) }

是否有一个纯粹的css（没有javascript）技巧/黑客这个有相当好的浏览器支持？

Answer 1

你可以使用过滤器来接近你想要达到的目标。

参见随附的演示

.p{
  color: blue;
  font-size: 2em;
  text-transform: uppercase;
  font-weight:bold;
  font-family:arial, sans-serif;
}

.c:hover{
  filter: brightness(0.2)
}

<div class="p">
  <div class="c">hello</div>