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

Question

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

element { color: inherited}

我还想在 hover 上将其调暗：

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

是否有纯粹的 css（没有 javascript）trick/hack 具有相当好的浏览器支持？

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>

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

Darken an inherited text color at runtime?

css

css-filters