除了悬停不同的兄弟元素之外，如何让第一个兄弟元素具有蓝色背景？

Question

我有以下要素：

<div>Timothy Gruns</div>
<div>Lawrence Fishly</div>
<div>Jackson Crolya</div>

我希望背景颜色在悬停时变为蓝色，但如果没有悬停，我希望第一个元素为蓝色。所以默认情况下它看起来像这样：

如果第三个元素被徘徊，它将如下所示：

Answer 1

如果您将所有3个div包装在容器中，则可以使用:first-child和:hover选择器来实现此目的：

＆＃13;

＆＃13;

div.container > div {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}
div.container > div:first-child {
  background: blue;
}
div.container:hover > div {
  background: white;
}
div.container > div:hover {
  background: red;
}

＆＃13;

<div class="container">
  <div>Timothy Gruns</div>
  <div>Lawrence Fishly</div>
  <div>Jackson Crolya</div>
</div>

＆＃13;

＆＃13;

＆＃13;

1. 设置内部div的边框/边距/填充。
2. 设置第一个内部div的默认背景为蓝色。
3. 当悬停容器时 - 所有内部div都获得白色背景
4. 当在容器内悬停div时 - 该div获得红色背景。

  

您可以设置自己的颜色:)这仅用于示例。

Answer 2

实现类似结果的另一种方法是反转名称的排序（因此“第一个”是最后一个兄弟标记）并在display: flex;的帮助下以您希望的方式显示结果：

.parent {
  display: flex;
  flex-direction: column-reverse;
}

.child {
  display: block;
  width: 200px;
}

.child:last-of-type {
  background-color: #72d5f1;
}

.child:hover ~ .child {
  background-color: inherit;
}

.child:hover {
  background-color: #72d5f1;
}

<div class="parent">
  <div class="child">Jackson Crolya</div>
  <div class="child">Lawrence Fishly</div>
  <div class="child">Timothy Gruns</div>
</div>