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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.