如何使任何悬停的颜色比原始颜色更暗/更亮 [英] how to make ANY hovered color darker/lighter that the original

问题描述

我想这样做，以便当您将鼠标悬停在某个元素上时，它总是比最初的颜色更暗或更亮.不管颜色

i want to make it so that when you hover over an element, it's always darker or lighter than it initially was. regardless of the color

类似但通用的

.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>

推荐答案

您正在寻找 brightness CSS过滤器:

You're looking for the brightness CSS filter:

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

The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker

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>

这篇关于如何使任何悬停的颜色比原始颜色更暗/更亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！