Body background color hover

Question

How to change page background when hovering over a? I am looking for a css-only solution.

I know that you can reach children via css, but I have no idea how / if you can get to the body.

Answer 1

While the Mike Ross demo solves your problem, it does not explain how and why it works. It can also be greatly simplified.

Basically you want to use a notation ::beforefor your element. This creates a pseudo-element, which is the first child of the related element for which you can apply an additional style. Then you can use the selector ::beforeto fill the screen with a specific background color. 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;
}

You do not need nth-of-typethere or anything else. See my violin here . All you have to do is make sure that the before element is up to full screen, in z reverse order and has a specific color.

Answer 2

Take a look at DEMO

Here is htmlpart of it

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

And so 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;
    }