javascript - 如何使 :hover? 上的元素颜色更暗

Question

我的网页中有多个元素。例如多个按钮(具有红色背景色)、链接(具有蓝色背景色) 等等......

我需要在 :hover 上更改它们的颜色。目前我是这样做的:

button{
  background-color: red;
}

button:hover {
   background-color: #c80020;
}

a {
  color: blue;
}

a:hover {
  color: #082767;
  cursor: pointer;
}

<button>button</button>
<a>link</a>

如您所见，我在 :hover 上使用了比元素颜色更深的颜色。

我只想知道，是否有任何颜色(或方法) 可以使元素比实际颜色更暗？我没有任何特定的颜色。实际上我不关心任何确切的颜色，我只是想让元素在 :hover 上更暗，仅此而已。有什么建议吗？

Answer 1

您可以使用 hsla 而不是十六进制颜色。

例子:

button{
 background-color: hsla(356, 98%, 46%, 1);
}

button:hover {
  background-color: hsla(356, 98%, 26%, 1);
}

<button>button</button>