Change Body Background Color On Link Hover

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 elements via css but I have no i

Solution 1:

Take a look at this DEMO

Here is html part of it

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

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

Solution 2:

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

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:

<aclass="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 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.