悬停链接改变* PAGE *背景色的CSS [英] hover link to change *PAGE* background color with css

问题描述

是否有可能使用CSS在一个单独的分区盘旋在不同的链接页面上时，改变了整个页面的背景？我不是很有经验的JS，所以解释将需要JS，如果是强制性的。鸭preciate任何帮助。谢谢！

Is it possible to change the whole page background when hovering over different links in a seperate div on the page using css? I am not very experienced with JS, so explaining will be needed if JS is mandatory. Appreciate any help. Thank you!

推荐答案

那么，它是某种可能。你会不会真正改变页面的背景，但效果会是相似的。

Well, it is somehow possible. You won't be actually changing the page's background, but the effect will be similar.

看看在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;
    }

基本上你只需要当光标悬停在链接创建一个pseudoelements。这pseudoelement，具有顶部，底部绝对位置，左，右等于0，将整个屏幕，给它的z-index -1将确保这将是一个页面中的所有其他元素下方。当然，你在申报相应pseudoelement背景颜色或图像。

Basically you just have to create a pseudoelements when a cursor hovers over a link. That pseudoelement, having absolute position with top, bottom, left and right equals 0, will take the whole screen and giving it a z-index -1 will make sure it will be below every other elements on a page. Of course you declare a background color or image in a corresponding pseudoelement.

有一个缺点，虽然。这不是太灵活。例如，如果任何祖先元素会比静态的（默认值）以外的其他位置，这将是一个有点困难 - 如果不是不可能 - 实现，因为你将不得不调整上，下，左，右属性。

There's a drawback, though. It's not too flexible. For example, if any of ancestor elements will have a position other than static (default), this will be a bit harder - if not impossible - to implement, since you will have to adjust the top, bottom, left, and right properties.

这篇关于悬停链接改变* PAGE *背景色的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！