Mike Ross' demonstration provides a solution to your issue, but it lacks an explanation of how or why it works and could be more straightforward.
The key is to utilize the ::before
notation on your element. This creates a pseudo-element that acts as the first child of the associated element, allowing you to apply additional styling. By styling the ::before
selector to cover the entire screen with a specific background color:
<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 can omit nth-of-type
and other unnecessary elements. Refer to my fiddle here. Just ensure that the before element covers the full screen, is positioned behind other elements, and has the desired color.