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

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