悬停链接以使用 css 更改 *PAGE* 背景颜色

Posted 2023-05-08

【中文标题】悬停链接以使用 css 更改 *PAGE* 背景颜色

【英文标题】：hover link to change *PAGE* background color with css

【发布时间】：2013-01-13 04:51:47

【问题描述】：

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

【参考方案1】：

div background color, to change onhover

这可能会对你有所帮助。

使用 javascript，您可以：

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

【参考方案2】：

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

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

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

【参考方案4】：

鼠标悬停时缺少style：

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