Question

不太确定从哪里开始。所以我在页面上的DIVS处于我想要的位置。

值得注意的是，这是使用CSS网格。

这么长的故事简短，我想知道的是，当我将鼠标悬停在特定的div上时，我可以更改页面上body元素的背景吗？

我有一个小提琴设置来帮助理解问题。

最初，我认为这可以工作：

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

但似乎这不起作用。

有什么想法吗？

Answer 1

我认为这有助于你

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 - 在DIV悬停上更改主体背景图像

1 个答案: