对兄弟姐妹的悬停效果

Question

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 - 这是一个默认悬停在 first-element 上的列表。当列表的兄弟姐妹悬停时，如何删除列表第一个 child 上的悬停效果？

当第一个 li 以外的 child 元素被 hover 编辑以将 first-child 的 color 变为 black。

Answer 1

因为 CSS doesn't have 以前的兄弟姐妹 select 或者，最接近的是使用 select 或 ul:hover li:not(:hover) 到 select 悬停在父 ul 元素上时当前未悬停的所有 li 元素。您可以使用 selector 覆盖其他样式并将 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>

对兄弟姐妹的悬停效果

Hover effect on siblings

css

hover