本文介绍了如何使任何悬停的颜色比原始颜色更暗/更亮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想这样做,以便当您将鼠标悬停在某个元素上时,它总是比最初的颜色更暗或更亮.不管颜色
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:
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>
这篇关于如何使任何悬停的颜色比原始颜色更暗/更亮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!