Modify CSS to switch body background image when a DIV is hovered

Question

Modify CSS to switch body background image when a DIV is hovered

Feeling a bit lost on where to start with this issue. My divs are positioned as desired on the page.

Just to clarify, I am utilizing CSS Grids for this.

In short, all I'm wondering is if it's possible to change the background of the body element when hovering over a specific div on the page?

I've set up a Fiddle to help illustrate the problem.

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

Initially, I thought that this CSS code could work:

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

Unfortunately, it seems like this approach doesn't produce the desired result.

Any ideas or suggestions on how to achieve this?

html css

Answer 1

Answer №1

Here is a solution that may be helpful for you:

body {
    height: 100%;
}

#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 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;
}

Answer 2

Here is a solution that may be helpful for you:

body {
    height: 100%;
}

#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 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;
}

Modify CSS to switch body background image when a DIV is hovered

Answer №1

Similar questions

JavaScript/CSS memory matching game

Is there a way to modify the color of a checkbox within MUI?

Can variables in JavaScript clash with input names in HTML?

Guide to implementing a slider in HTML to adjust the size of my canvas brush

The back-to-top button guides users back to their last visited page

Tips for navigating a dynamic viewport using scroll movement

Troubleshooting a unique CSS problem on an Android PhoneGap

Update the link's name and href using jQuery

What is the proper way to apply a background color to the entire body using CSS?

Adjusting the quantity of buttons in real-time following an ajax request

Tips for creating a consistently positioned div element, regardless of the screen size

Unable to apply 100% height to flex child element

Is the <ul> tag aligning to the left?

Require the header text to appear black on a white background and white on a dark background

Tips for zooming to the middle of a div element

Tips for animating elements to move on scroll while navigating through the webpage

What is the best way to align a button with a title on the right side of a page?

Tips to store Google fonts in the assets directory

Disappearing sticky-top navbar in Bootstrap when scrolling

What is the maximum allowable size for scripts with the type text/json?