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