Question

感谢ELIEL的LINK

我想要做的是在将鼠标悬停在div上时更改正文背景，但我无法获得它，我得到的是 div 背景改变了。

我确实在正文上有颜色，这是黑色的，如果我将鼠标悬停在div1上，我想将其更改为白色。

这就是我试过的

body{
    background-color:black;
}
#div1:hover {
    background-color:white;
}

但是这会改变我的div1背景颜色而不是身体背景颜色。

Answer 1

要干净地编辑元素的悬停状态，您需要同时定位中性和悬停状态，如下所示：

div {
    background-color:red;
} 
div:hover {
    background-color:blue;
}

上面代码的问题在于您定位正文，然后定位其他元素的:hover状态。如果要更改body悬停状态，请使用：

body{
    background-color:black;
}
body:hover {
    background-color:white;
}

请注意，虽然整个浏览器窗口都会显示body个样式，但只有包含内容的部分才会响应body:hover

Answer 2

您可以尝试使用Javascript。

<html>
<head>
<script>
function changeBgColor(color) {
    document.body.style.background = color;
}
</script>
</head>
<body>
<div id='div1' onmouseover="changeBgColor('green');" onmouseout="changeBgColor('yellow');">test</div>
</body>
</html>

CSS在悬停时更改背景

2 个答案: