对兄弟姐妹的悬停效果

【问题标题】：Hover effect on siblings对兄弟姐妹的悬停效果
【发布时间】：2016-01-14 11:27:41
【问题描述】：

HTML/CSS：

body {
  padding: 50px;
}
ul li:first-child,
ul li:hover {
  color: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

JsFiddle - 这是一个列表，它的第一个元素默认悬停。当其兄弟姐妹悬停时，如何删除列表的第一个孩子的悬停效果？

当不是第一个li 子元素时hovered 将color 的first-child 转换为black。

【问题讨论】：

标签： css hover

【解决方案1】：

由于 CSS doesn't have 是先前的同级选择器，因此您可以获得的最接近的方法是使用选择器 ul:hover li:not(:hover) 来选择当前未悬停在父 ul 元素上时未悬停的所有 li 元素.您可以使用该选择器覆盖其他样式并将 li 元素设置回黑色：

Updated Example

ul {
  display: inline-block;
  list-style: none;
  margin: 0; padding: 0;
}
ul:hover li:not(:hover) {
  color: #000;
}
ul li:first-child,
ul li:hover {
  color: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

【讨论】：