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

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> 的 child 或 <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>