1

Is it possible to change the whole page background when hovering over different links in a seperate div on the page using css? I am not very experienced with JS, so explaining will be needed if JS is mandatory. Appreciate any help. Thank you!

Nate Harris
  • 11
  • 1
  • 2

4 Answers4

0

div background color, to change onhover

This may help you.

With javascript, you can do:

<div onmouseover="document.body.backgroundColor='yourColor';"> </div>
Community
  • 1
  • 1
Mukul Kapoor
  • 185
  • 1
  • 2
  • 12
0

Using CSS alone, it is not possible to affect the style of an ancestor of the hovered element. Your problem requires JavaScript.

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108
0

Well, it is somehow possible. You won't be actually changing the page's background, but the effect will be similar.

Take a look at the code.

    body {
        background: lightblue;
    }
    a:hover:before {
        content: '';
        position: absolute;
        display: block;
        top: 0; bottom: 0; left: 0; right: 0;
        z-index: -1;
    }
    li:nth-of-type(1) a:hover:before {
        background-color: blue;
    }
    li:nth-of-type(2) a:hover:before {
        background-color: red;
    }
    li:nth-of-type(3) a:hover:before {
        background-color: green;
    }

Basically you just have to create a pseudoelements when a cursor hovers over a link. That pseudoelement, having absolute position with top, bottom, left and right equals 0, will take the whole screen and giving it a z-index -1 will make sure it will be below every other elements on a page. Of course you declare a background color or image in a corresponding pseudoelement.

There's a drawback, though. It's not too flexible. For example, if any of ancestor elements will have a position other than static (default), this will be a bit harder - if not impossible - to implement, since you will have to adjust the top, bottom, left, and right properties.

Mateusz Kocz
  • 4,492
  • 1
  • 25
  • 27
-1

missing style in onmouseover:

class="test" onmouseover="document.body.style.backgroundColor='red';"
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Ionut Cracana
  • 1