CSS选择器：悬停时更改兄弟姐妹的样式[重复]

【问题标题】：CSS Selectors: Change style of siblings while hover [duplicate]CSS选择器：悬停时更改兄弟姐妹的样式[重复]
【发布时间】：2021-03-20 13:29:42
【问题描述】：

这是我的代码：

li:hover {
  color: red;
}


/* 
li > li:hover  {
color: blue;
}
 */

<ul>
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
  <li>Link 4</li>
</ul>

如果您将鼠标悬停在一个链接上，则此链接应为红色，所有其他链接应为蓝色。是否可以使用 CSS 选择器做到这一点？

非常感谢您的帮助！

【问题讨论】：

标签： html css

【解决方案1】：

您可以尝试在悬停ul 时突出显示所有li 到blue，特定.link 类li 突出显示为red。

.link:hover {
  color: red;
}



ul:hover > li {
color: blue;
}

<ul>
  <li class='link'>Link 1</li>
  <li class='link'>Link 2</li>
  <li class='link'>Link 3</li>
  <li class='link'>Link 4</li>
</ul>

【讨论】：

【解决方案2】：

也许这会有所帮助。如果有，请告诉我。

ul:hover li {
  color: blue
}

li:hover {
  color: red !important;
}

【讨论】：