<nav class="nav flex-column hoverOpacity">
<a class="nav-link" href="#">link 1</a>
<a class="nav-link" href="#">link 3</a>
<a class="nav-link" href="#">link 3</a>
<a class="nav-link" href="#">link 4</a>
</nav>
.hoverOpacity{
display: flex;
flex-direction: column;
}
.hoverOpacity:hover > *{
opacity:0.4;
}
.hoverOpacity > a:hover,
.hoverOpacity > a:focus,
.hoverOpacity > a:active{
opacity:1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.