1

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

4

4 回答 4

0

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

于 2013-01-29T15:18:47.257 回答
0

div背景颜色，改变悬停

这可能会对您有所帮助。

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

<div onmouseover="document.body.backgroundColor='yourColor';"> </div>
于 2013-01-29T15:09:49.467 回答
0

嗯，这是有可能的。您实际上不会更改页面的背景，但效果会相似。

看看代码。

    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 将确保它低于页面上的所有其他元素。当然，您在相应的伪元素中声明背景颜色或图像。

不过有一个缺点。它不太灵活。例如，如果任何祖先元素的位置不是静态（默认），这将有点难以实现——如果不是不可能的话——因为您必须调整顶部、底部、左侧和右侧属性。

于 2013-01-29T21:24:55.870 回答
-1

在鼠标悬停中丢失style：

class="test" onmouseover="document.body.style.backgroundColor='red';"
于 2015-07-11T09:56:54.460 回答