Html 更改链接悬停时的主体背景色

当鼠标悬停在

a

上时，如何更改页面背景？我正在寻找一个css唯一的解决方案

我知道您可以通过css访问子元素，但我不知道如何/是否可以访问主体。

看看这个

这是

html

的一部分

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

---

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

基本上，您希望在元素上使用符号。这将创建一个伪元素，它是关联元素的第一个子元素，您可以为其应用额外的样式。然后，您可以设置

：：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;
}

---

。您需要做的就是确保before元素是全屏的，在z顺序的后面，并且具有特定的颜色。
就我所知，使用纯css解决方案无法做到这一点know@Mia不过，您可以使用jquery来实现这一点。您必须首先了解基本的，我将在演示中添加
a:hover:before
应该是
position:fixed因为链接可能位于容器中，且
位置为：relative然后背景将根据容器位置显示。您是否能够将代码的关键部分带入此答案中，以便我们将其作为参考？链接可能会腐烂，你的答案将不再有用…非常好-如果我想为每个项目显示不同的颜色怎么办？颜色位于自定义数据颜色属性中。请将颜色分隔为其他类别。例如，
.special blue:hover:before
只包含
背景色：#00ff00
。然后你的链接会有类
special blue
。我已经在我的页面上动态生成了对象——div是由服务器创建的，带有数据颜色属性（当然，这可以是创建过程中的任何其他属性），但这看起来像是我必须为每种颜色创建一个悬停。。。。很难说你是对的，我刚刚从我分享的链接和stackoverflow的另一个答案中得到了这个想法。无论如何，你的代码很简单，我正在尝试更新我的代码，尽管这并不能完全解决我的问题，这是最接近的答案。我把这个标记为解决方案。非常感谢。
<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;
}