CSS & JS change div background-color on button hover?

user_11944955 0
Viewed 1056

For my Website, I have a set background-color of the div class "coverbg", for example

cover{
  background-color: #FFFFFF;
}

I also have a button defined in the .html-File (Let's say it has the ID "triggerbg"), and I want the Background-Color of the div to change (to for example #000000;) when the button is being hovered over with a mouse and change back when the mouse isn't on the button anymore. Is there a way to do this?

I also tried a code from stackoverflow, I tried replacing "body" with div class "cover" but it is not working,

var button = document.getElementById('hover');
var body = document.body;

button.onmouseover = function() {
  body.className = 'hovered';
}

button.onmouseout = function() {
  body.className = '';
}
body {
  background: #000;
}

body.hovered {
  background: #ff0;
}
<button id="hover">button</button>

Sorry, I am new to JS.

css html jquery javascript
4 Answers

if you want to change the body background modifying Ran Turner's post you get

function over(){
document.getElementsByTagName("BODY")[0].className = 'hovered';
}
function out(){
document.getElementsByTagName("BODY")[0].className = ' '
}
.hovered{
background:#000000;
}
<html>
<head></head>
<body>
<button onmouseover="over()"  onmouseout="out()">hover</button>
</body>
</html>
or if you want a div

var trigger=document.getElementById("triggerbg");
var cover=document.getElementsByClassName("cover");
trigger.onmouseover=function(){
for (var i = cover.length-1; i >= 0; i--) {
   cover[i].className="hovered";
}
cover=document.getElementsByClassName("hovered");
}
trigger.onmouseout=function(){
for (var i = cover.length-1; i >= 0; i--) {
   cover[i].className="cover";
}
cover=document.getElementsByClassName("cover");
}
.cover{
background-color:yellow;
}
.hovered{
background-color:#000000;
}
<button id="triggerbg">hover</button>
<div class="cover">here</div>
<div class="cover">there</div>
<div class="cover">and</div>
<div class="cover">everywhere</div>

Admin1

You also need to get the div element and on onmouseover/onmouseout events add/remove the class from that div respectively 

var button = document.getElementById('hover');
var div = document.getElementById('your-div');


button.onmouseover = function() {
    div.className = 'hovered';
}

button.onmouseout = function() {
    div.className = '';
}
.hovered{
  background-color: #000000;
}
<button id="hover">button</button>
<div id="your-div">
hover button to change color
</div>

user_74942180

In this Code, onmouseover and onmouseout event is used to change the class of div.

<html lang="en">
<head>
    <title>Document</title>
    <style>
        /* hover class to change the background when hover on button */
        .hover{     
            background-color:#aaaaaa
            /* color=red */
        }
        
    </style>
</head>
<body>
    <button id="hover" class="demo">button</button>
    <div id='div' >Hover on button to see the effect on div</div>
    
    <script>

    let button = document.getElementById('hover');
    
    let div = document.getElementById('div');

    button.onmouseover = () =>{         // onmouseover event which executes when the mouse hover on element button
      div.className ='hover';           // change the class name of div
    }
    button.onmouseout = () =>{         

      div.className ='';
    }

    
    </script>
</body>
</html>

user_154782520

Here is the code snippet you use to change the background of a button on the mouse hover. In this Code, we use the hover property of a class that changes the background of a button when hover. You can use the style in your external CSS file or internal CSS in the HTML file in the tag.

<html lang="en">
<head>
    <title>Document</title>
    <style>
        .demo:hover{
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
    <button id="hover" class="demo">button</button>
</body>
</html>

user_154782520
Related