悬停在一个链接上时 - 更改所有其他链接的样式

Question

我有一个链接列表。当我悬停/专注于其中之一时。我想更改未悬停的链接的样式。

HTML

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

CSS

li {
list-style: none;
    display: inline-block;
}
a {
color: black;
text-decoration: none;
padding: 15px;
opacity: 1;
}

a:hover {
color: black;
}

a:hover li a {
opacity: 0.5
}

这通常可以更改不同元素的样式，但此逻辑似乎不适用于链接。

先感谢您

Answer 1

使用 将效果添加到所有链接nav:hover a。

使用 nav li a:hover

如评论中所述，您的 HTML 无效。<li>必须是<ul>or 的孩子<ol>。

ul {
  padding: 0;
}

li {
  list-style: none;
  display: inline-block;
}

a {
  color: black;
  text-decoration: none;
  padding: 15px;
  opacity: 1;
}

nav:hover a {
  opacity: .5;
}

nav li a:hover {
  opacity: 1;
}

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