Javascript 根据以前的值更改HTML元素的颜色-CSS

我想在元素悬停时使用CSS更改HTML中元素的

背景色。以下是我所拥有的：

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) */

}

我想不出如何才能做到这一点

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

非常感谢。
您不能像在其他编程语言中那样在CSS中添加逻辑或函数。如果您想这样做，您需要一个CSS预处理器，如Sass或更少的，它将生成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;
}

这不是一个CSS解决方案，但它应该根据需要工作（未经测试）。第二个侦听器用于更改颜色，因此如果不需要，可以将其删除=）

var elements=document.getElementsByTagName（'h'）；
//获取带有h标记的所有元素
for（var i=0；i
LESS或SASS将允许您使用纯CSS解决方案……它们只是CSS的编译器。听起来您这样问是因为在页面加载CSS以外的内容后，CSS会在某个时候被修改，在这种情况下，您必须使用javascript。您可以使用javascript来完成此操作。我建议您使用这个简单的JavaSc颜色操纵库：谢谢。我一定会调查的
var elements = document.getElementsByTagName('h'); 
//get all elements with h tag
for(var i = 0; i< elements.length;i++)
{
    var element = elements[i];
    element.addEventListener("mouseenter", function() //adds event listener for mouse moving onto element
    { 
        var currentBGColor = getComputedStyle(elements[i])['backgroundColor']; 
        // gets current background color
        var parts = currentBGColor.replace(/[a-z|(|)]/gi,'').split(','); 
        //removes rgba( & ), then cuts string by comma
        elements[i].style.backgroundColor = 'rgba('+parseInt(parts[0]+50)+''+parts[1]+''+parts[2]+''+parts[3]+')'; 
        //set new style
    }
    element.addEventListener("mouseleave", function() //adds event listener for mouse leaving element
    { 
        var currentBGColor = getComputedStyle(elements[i])['backgroundColor']; 
        // gets current background color
        var parts = currentBGColor.replace(/[a-z|(|)]/gi,'').split(','); 
        //removes rgba( & ), then cuts string by comma
        elements[i].style.backgroundColor = 'rgba('+parseInt(parts[0]-50)+''+parts[1]+''+parts[2]+''+parts[3]+')'; 
        //set new style
    }
}