My navigation menu consists of a div element that becomes slightly transparent when hovered over (while all hyperlinks are opaque before the hover). I am trying to achieve the effect where the current hyperlink being hovered returns to full opacity, similar to the navigation on this website:
I need help figuring out how to implement this style in my navigation. Any guidance on how to achieve this would be greatly appreciated.
a:focus,
a:hover {
color: #333300;
}
a {
text-decoration: none;
}
.header-inner {
padding: 20px;
}
#header-nav ul {
list-style-type: none;
}
#header-nav ul li {
display: inline-block;
position: relative;
zoom: 1;
-webkit-backface-visibility: hidden;
vertical-align: middle;
font-size: 20px;
margin: 0 auto !important;
}
#header-nav ul li a {
margin-left: 60px;
transition: .4s all ease-in;
font-weight: bold;
color: #333300;
padding: 0 10px;
}
#header-nav {
width: 50%;
height: 25px;
margin: 0 auto;
transition: .2s ease-out;
}
#header-nav:hover {
opacity: .5;
}
.header-nav-item {
color: #333300;
}
#header-nav:hover>.header-nav-item {
opacity: 1;
}<div class="container-fluid">
<header class="header header-bottom">
<div class="header-inner">
<nav id="header-nav">
<ul>
<li><a href="#" class="header-nav-item">item1</a></li>
<li><a href="#" class="header-nav-item">item2</a></li>
<li><a href="#" class="header-nav-item">item3</a></li>
<li><a href="#" class="header-nav-item">item4</a></li>
<li><a href="#" class="header-nav-item">item5</a></li>
<li><a href="#" class="header-nav-item">item6</a></li>
</ul>
</nav>
</div>
</header>
</div>