当鼠标悬停在链接上时更改页面背景颜色

Question

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

我知道可以通过css访问子元素，但不知道如何/能否访问body元素。

- Mia

---

据我所知，你无法使用纯 CSS 解决方案来做到那一点。 - Hawkings

@Mia，你可以使用 jquery 来实现这个。 - Mike Ross

你必须先了解基础知识，https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover - Edmhar

Answer 1

请查看此演示 这是它的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;
    }

- Mike Ross

---

我只是想在演示中补充一点，即 a:hover:before 应该是 position: fixed;，因为链接可能在具有 position: relative; 的容器中，然后背景将根据容器的位置出现。 - Viktor Maksimov

你能否将代码的关键部分带入这个答案中，以便我们在 Stack Overflow 上有参考？链接可能会失效，你的回答也就不再有用了... - Steven Anderson

Answer 2

虽然Mike Ross的演示解决了您的问题，但它没有解释它是如何或为什么起作用。它也可以被大大简化。

基本上，您想在元素上使用 :: 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或其他任何东西。请参见我的这里示例。你所需要做的就是确保before元素是全屏的，在z顺序的后面，并具有特定的颜色。

- Matt Way

---

非常好 - 如果我想为每个项目显示不同的颜色怎么办？颜色在自定义数据颜色属性中。 - Mia

只需将颜色分离成额外的类。例如，.special-blue:hover:before 只包含 background-color: #00ff00。然后您的链接将具有类 special special-blue。 - Matt Way

我在页面上动态生成了对象 --- 这些 div 是由服务器创建的，具有 data-color 属性（当然，在创建过程中可以是任何其他属性），但这似乎意味着我必须预先为每种颜色可能性创建一个 hover... 这很困难。 - Mia

@mattWay，你说得对，我只是从我分享的链接和StackOverflow上的另一个答案中得到了灵感。无论如何，你的方法非常简单明了，我正在尝试更新我的代码。 - Mike Ross

尽管这并没有完全解决我的问题，但这是最接近的答案。我将其标记为解决方案。谢谢。 - Mia