Change body background color on link hover

Question

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

I know that you can reach the child ele

Answer 1

Take a look at this DEMO

Here is html part of it

link 1

And here is the 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;
    }