Question

当鼠标悬停在a上时，如何更改页面背景？我正在寻找一种仅限css的解决方案。

我知道你可以通过css到达子元素，但我不知道你是否可以到达身体。

Answer 1

看看这个DEMO

以下是html部分内容

<a href="">link 1</a>

这是css

body {
        background: lightblue;
    }
    a:hover:before {
        content: '';
        position: fixed;
        display: block;
        top: 0; bottom: 0; left: 0; right: 0;
        z-index: -1;
        background-color: grey;
    }

Answer 2

Mike Ross＆＃39;演示解决了您的问题，它没有解释它的工作原理或原因。它也可以大大简化。

基本上，您希望在元素上使用::before表示法。这将创建一个伪元素，该元素是关联元素的第一个子元素，您可以为其应用额外的样式。然后，您可以设置::before选择器的样式，以使用特定背景颜色填充屏幕。例如：

<a class="special">Test</a>

.special:hover:before{
    content: '';
    position: fixed;
    display: block;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background-color: #ff0000;
}

你在那里或其他任何地方都不需要nth-of-type。看我的小提琴here。您需要做的就是确保before元素是全屏，在z顺序的后面，并且具有特定的颜色。

更改链接悬停时的正文背景颜色

2 个答案: