将鼠标悬停在 div 上时如何更改其他元素的不透明度 | CSS

Question

我有一个导航栏，在导航栏中有 3 个元素可以点击（主页、项目、关于）。所有这些都在 div“.navbar li a”中。其中之一，主页，我现在所在的页面，不透明度为 100%。如果我将鼠标悬停在其他元素上，它们的不透明度会从 55 变为 100，但“home”仍然保持 100% 的不透明度。我想要它，当我将鼠标悬停在其他元素（如项目或关于）上时，元素“home”将其不透明度更改为 55%

以下 CSS 代码：

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

搜索问题，但没有任何真正帮助我

Answer 1

你可以试试

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