Question

当使用css将鼠标悬停在页面上单独div中的不同链接上时，是否可以更改整个页面背景？我对JS不是很有经验，所以如果JS是强制性的，那么就需要解释。感谢任何帮助。谢谢！

Answer 1

这可能会对你有帮助。

使用javascript，您可以执行以下操作：

<div onmouseover="document.body.backgroundColor='yourColor';"> </div>

Answer 2

单独使用CSS，不可能影响悬停元素的祖先样式。您的问题需要JavaScript。

Answer 3

嗯，这在某种程度上是可能的。您实际上不会更改页面的背景，但效果将类似。

Take a look at the code

    body {
        background: lightblue;
    }
    a:hover:before {
        content: '';
        position: absolute;
        display: block;
        top: 0; bottom: 0; left: 0; right: 0;
        z-index: -1;
    }
    li:nth-of-type(1) a:hover:before {
        background-color: blue;
    }
    li:nth-of-type(2) a:hover:before {
        background-color: red;
    }
    li:nth-of-type(3) a:hover:before {
        background-color: green;
    }

基本上，当光标悬停在链接上时，您只需要创建一个伪元素。具有顶部，底部，左侧和右侧的绝对位置等于0的伪元素将占据整个屏幕并给它一个z-index -1将确保它将低于页面上的每个其他元素。当然，您在相应的伪元素中声明背景颜色或图像。

但是有一个缺点。它不太灵活。例如，如果任何祖先元素的位置不是静态（默认），那么实现起来会有点困难 - 如果不是不可能的话 - 因为您必须调整顶部，底部，左侧和右侧属性。

Answer 4

在onmouseover中缺少style：

class="test" onmouseover="document.body.style.backgroundColor='red';"

悬停链接以改变* PAGE *背景颜色与css

4 个答案: