CSS - Change body Background Image on DIV Hover

Question

Not too sure where to begin with this one. So I have my DIVS on the page in the position I want them.

It's worth noting this is using CSS Grids.

So long story short, all I want to know is, Can i change the background of the body element on the page when I hover over a particular div?

I have a Fiddle setup to assist in understanding the problem.

Fiddle: https://jsfiddle.net/bqnw4qyb/

Originally, I thought this COULD work:

.div:hover {
    body {
       background-color: red;
    }
}

But it appears this does not work.

Any thoughts?

Short answer: no. CSS does not currently support parent/ancestor instructions, only child/descendant. — Mitya, Apr 17 '18 at 10:27
Using javascript can do your task. Here is the fiddle updated with javascript. The problem with jsfiddle is you cannot use tags. So follow the comments I made. https://jsfiddle.net/bqnw4qyb/44/ — Akash Pinnaka, Apr 17 '18 at 10:48

score 2 · Answer 1 · answered Apr 17 '18 at 10:31

I think this is help you

body {
    height: 100%;
}

#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    widht: 100%;
    height: 100%;
    z-index: 1;
    background: #EEE;
}

#trigger {
    position: absolute;
    width: 200px;
    height: 136px;
    top: 50%;
    left: 50%;
    margin: -68px 0 0 -100px;
    background: #333;
    z-index: 2;
}

#trigger:hover ~ #bg {
    background: #ff0000;
}

<div id="trigger"></div>

<div id="bg">
</div>

CSS - Change body Background Image on DIV Hover

1 Answers1