I would like to change the background-color of an element in HTML using CSS when the element is hovered on. Here is what I have:
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) */ } I can't figure out how to achieve that.
Also, I have seen some suggestions online about doing it with LESS or SASS but I would really prefer a pure-CSS solution.
Thank you very much.
You can't add logic or function in a CSS like you would do in other programming langages. If you want to do so, you need a CSS pre-processor like Sass or LESS that will generate the CSS result. But you have to know that LESS or Sass will generate normal CSS (as you said pure CSS) because they are CSS. It's like a CSS extension...
For exemple with 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); } } will generate following CSS
h1 { background-color: #643c00; } h1:hover { background-color: #963c00; } 
This isn't a CSS solution but this should work(untested) as required. The second listener is for changing the colour back, so you can remove it if you don't need it =)
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 } } 