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

【问题标题】：When hovering on one link - change the style of all the other links悬停在一个链接上时 - 更改所有其他链接的样式
【发布时间】：2018-03-05 23:45:35
【问题描述】：

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

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
}

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

提前谢谢你

【问题讨论】：

你的 <li> 元素应该被包裹在一个 <ul> 父元素中。否则，这是无效的 HTML。

标签： css hover

【解决方案1】：

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

使用nav li a:hover将效果添加到单个链接

如 cmets 中所述，您的 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>

【讨论】：