CSS Nav Hover Full-Page Overlay

by abbylangner

HTML

<nav>
    <a id="nav-item1" href="#">Item 1</a>
    <a id="nav-item2" href="#">Item 2</a>
    <a id="nav-item3" href="#">Item 3</a>
    <div id="overlay"></div>
</nav>
<section>
    <p>
        Here is some page content :) including a <a href="http://abbysdoor.com" target="_blank">clickable link</a>.
    </p>
    <img src="http://placekitten.com/g/400/200" alt="Kitten"/>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</section>

CSS

body{
    position: relative;
}
nav{ 
    text-align: center;
}
nav a{
    text-decoration: none;
    display: inline-block;
    padding: 20px 40px;
    border: 2px dotted #000000;
    border-radius: 10px;
}
#nav-item1{
    background: rgba(255,0,0, 0.5);
}
#nav-item1:hover{
    background: rgba(255,0,0, 1);
}
#nav-item2{
    background: rgba(0,255,0, 0.5);
}
#nav-item2:hover{
    background: rgba(0,255,0, 1);
}
#nav-item3{
    background: rgba(0,0,255, 0.5);
}
#nav-item3:hover{
    background: rgba(0,0,255, 1);
}
#overlay{
    /*context for positioning must be the BODY. if the NAV must be positioned then we need a different solution. also, z-index must be high enough to be above all other page content but not higher than the nav buttons*/
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
a{
    /*z-index for all clickable content must be higher than overlay*/
    position: relative;
    z-index: 101;
}
/*the following selectors rely on the fact that the #overlay DIV comes directly after all of the NAV Anchors*/
nav a#nav-item1:hover ~ #overlay{
    background-color: rgba(255,0,0, 0.2);
}
nav a#nav-item2:hover ~ #overlay{
    background-color: rgba(0,255,0, 0.2);
}
nav a#nav-item3:hover ~ #overlay{
    background-color: rgba(0,0,255, 0.2);
}