javascript - 根据先前的值更改 HTML 元素的颜色 - CSS

Question

我想在元素悬停时使用 CSS 更改 HTML 中元素的 background-color。这是我所拥有的:

h1 {
    background-color: rgb(100,60,0);
}

h1:hover {
    /* increase background-color red component by 50 */
    /* new background-color would be rgb(150,60,0) */

}

我不知道如何实现。

另外，我在网上看到了一些关于使用 LESS 或 SASS 的建议，但我真的更喜欢纯 CSS 解决方案。

非常感谢。

Answer 1

您不能像在其他编程语言中那样在 CSS 中添加逻辑或函数。如果你想这样做，你需要一个 CSS 预处理器，如 Sass 或 LESS 来生成 CSS 结果。但是您必须知道 LESS 或 Sass 会生成普通的 CSS(如您所说的纯 CSS)，因为它们是 CSS。它就像一个 CSS 扩展......

以 Sass 为例:

$color: rgb(100,60,0);
h1 {
    background-color: $color;
  &:hover {
    // increase background-color red component by 50
    // new background-color would be rgb(150,60,0)
    background-color: adjust-color($color, $red: 50);
  }
}

将生成以下 CSS

h1 {
  background-color: #643c00;
}
h1:hover {
  background-color: #963c00;
}