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

【问题标题】：Darken an inherited text color at runtime?在运行时使继承的文本颜色变暗？
【发布时间】：2017-06-25 19:23:22
【问题描述】：

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

element { color: inherited}

我也想在hover 上把它变暗：

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

是否有一个纯 css（无 javascript）技巧/hack 具有相当好的浏览器支持？

【问题讨论】：

标签： css css-filters

【解决方案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>

【讨论】：