-1

SOLVED THANKS TO ELIEL's LINK

What I want to do is to change the body background while hovering on a div, but I can't acquire that, what I get is the div background changed.

I do have the color on the body, which is black, and I want to change it to white if I hover on the div1.

That is what I have tried

body{
    background-color:black;
}
#div1:hover {
    background-color:white;
}

But this changes my div1 background color instead of the body background color.

Community
  • 1
  • 1
Jalu
  • 310
  • 1
  • 11

2 Answers2

1

To cleanly edit the hover state of an element, you need to target both the neutral and hover states, like this:

div {
    background-color:red;
} 
div:hover {
    background-color:blue;
}

The problem with your code above is that you are targeting the body, then targeting the :hover state of a different element. If you want to change the body hover state, you would use:

body{
    background-color:black;
}
body:hover {
    background-color:white;
}

Bear in mind that while the entire browser window will show body styles, only the sections containing content will respond to body:hover

Timmah
  • 1,123
  • 1
  • 9
  • 23
  • What I want to do, or try to do is to change the body background while hovering the div. – Jalu Aug 12 '14 at 00:32
  • The easiest way to do that would be to place a wrapper `div` immediately inside the `body` with , then apply the styles and `:hover` state to that. Changing one element while targeting another with CSS can be a bit messy – Timmah Aug 12 '14 at 00:37
0

You can try with Javascript.

<html>
<head>
<script>
function changeBgColor(color) {
    document.body.style.background = color;
}
</script>
</head>
<body>
<div id='div1' onmouseover="changeBgColor('green');" onmouseout="changeBgColor('yellow');">test</div>
</body>
</html>
Lovato
  • 2,034
  • 1
  • 13
  • 20