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中添加逻辑或函数。如果你想这样做，你需要一个像Sass或LESS这样的CSS预处理器来生成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;
}

Answer 2

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

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

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

2 个答案: