How to change opacity of other elements when hovering over a div

I have a navbar, in the navbar there are 3 elements to click on (home, projects, about). All of them are in the div ".navbar li a". One of them, home, the page i'm on right now, has an opacity of 100%. If i hover over the other elements, the opacity of them changes from 55 to 100, but "home" still stays on the opacity of 100%. I want it, that when i hover over the other elements (like projects, or about), that the element "home" changes its opacity to 55%

followin.g CSS code:

.active {
  opacity: 100%;
}

.nav_links li a {
  transition: 0.3s ease 0s;
  color: rgb(185, 209, 255);
  opacity: 55%;
}

.nav_links li a:hover {
  opacity: 100%;
  transition: 0.3s ease 0s;
}

Searching the problem, but nothing really helped me

CodePudding user response：

You could try

.nav-links:has(a:hover) > li a{
    opacity: 55%;
  }

CodePudding user response：

You can reset the opacity of all the children of your ul element on hover, then use a more specific selector to target the child a you are hovering on:

.navlinks {
  display: inline-block;
  list-style: none;
  padding: 0;
}

.nav-links li a {
  display: block;
  padding: 0;
}

.nav_links li a,
.nav_links:hover li a.active {
  opacity: 55%;
}

.nav_links li a.active,
.nav_links li a:hover {
  opacity: 100%
}

Assuming your structure is:

<ul >
  <li><a href="#" >Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>