CSS - 在DIV悬停上更改主体背景图像

时间:2018-04-17 10:25:15

标签: html css

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

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

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

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

小提琴:https://jsfiddle.net/bqnw4qyb/

最初,我认为这可以工作:

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

但似乎这不起作用。

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

我认为这有助于你

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>