在链接悬停上更改主题背景颜色 [英] Change body background color on link hover

问题描述

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

How can I change the the page background when the mouse is hovered on a a? I'm looking for a css only solution.

我知道你可以通过css到达子元素，但我不知道如何/如果你可以达到身体。

I know that you can reach the child elements via css but I have no idea how/if you can reach the body.

推荐答案

虽然Mike Ross的演示解决了您的问题，但它不解释它的工作原理。

While Mike Ross' demo solves your problem, it doesn't explain how or why it works. It can also be dramatically simplified.

基本上你想使用 :: before 符号。这将创建一个伪元素，它是相关元素的第一个子元素，您可以为其应用其他样式。然后可以对 :: before 选择器进行设置，以使用特定的背景颜色填充屏幕。例如：

Basically you want to use the ::before notation on your element. This creates a pseudo-element that is the first child of the associated element, for which you can apply extra styling. You can then style the ::before selector to fill the screen with a particular background colour. For example:

<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顺序的后面，并有特定的颜色。

You don't need nth-of-type in there or anything else. See my fiddle here. All you need to do is make sure that the before element is full screen, in the back of the z order and has a particular color.

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