如何使任何悬停的颜色比原始颜色更深/更浅

Question

我想做的是当你将鼠标悬停在一个元素上时，它总是比最初更暗或更亮。不管颜色

像这样但普遍的东西

 .darker{
Background:red;
width:100px;
height:100px
}

.darker:hover{
Background:#b20000
}
.lighter {
Background:blue;
width:100px;
height:100px
}

.lighter:hover{
Background:#adccff
}

 <div class='darker'></div>
<div class='lighter'></div>

原文由 valeria 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在寻找 brightness CSS 过滤器：

brightness() CSS 函数对输入图像应用线性乘数，使其看起来更亮或更暗

 div {
  width: 50px;
  height: 50px;
  background: red;
  filter: brightness(1);
}

.light-on-hover:hover {
  filter: brightness(5.00);
}

.dark-on-hover:hover {
  filter: brightness(0.5);
}

 <h5> Darker on hover </h5>
<div class="dark-on-hover"></div>

<h5> Lighter on hover </h5>
<div class="light-on-hover"></div>

原文由 nicholaswmin 发布，翻译遵循 CC BY-SA 4.0 许可协议