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 - 这是一个列表，其第一个元素是默认的悬停。当兄弟姐妹徘徊时，如何删除列表中第一个孩子的悬停效果？

当li个{@ 1}}个子元素不在hover之后，color first-child转为black。

Answer 1

由于CSS doesn't have是上一个兄弟选择器，因此您可以使用选择器ul:hover li:not(:hover)来选择当鼠标悬停时当前未悬停的所有li元素。父ul元素。您可以使用该选择器覆盖其他样式并将li元素设置回黑色：

Updated Example

＆＃13;

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;
}

＆＃13;

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

＆＃13;

悬停对兄弟姐妹的影响

1 个答案: