html - 悬停在多个元素上(纯 css)

Question

我有一个这样的代码场景

 <li>
  <span class="text">some text goes here</span>
  <div class="icon-wrapper">
    <span class="icon icon1"></span>
    <span class="icon icon2"></span>
  </div>
 </li>

现在我需要的是

1. 如果我将鼠标悬停在 icon1 类上，.text(class) 和 .icon1(class) 都应分别更改其背景颜色.
2. 同样，如果我将鼠标悬停在 icon2 上，.text、.icon1 和 .icon2 应该更改其背景颜色。

---

我熟悉 CSS 中的组合选择器，但无法在这种情况下实现。这是屏幕截图:

Answer 1

如果你使用 display: flex 你可以完成类似的事情，你标记明智地让它们按倒序排列，所以你可以使用兄弟选择器，虽然在视觉上，使用 Flexbox 的 order 属性，你把它们换回正确的顺序

.test {
  display: inline-flex;
  background: #eee
}
.test > span {
  display: inline-block;
  position: relative;
  color: green;
  border: 1px solid green;
  padding: 5px;
}
.test > span:nth-child(1) { order: 3; }
.test > span:nth-child(2) { order: 2; }
.test > span:nth-child(3) { order: 1; }

.test > span:hover,
.test > span:hover ~ span {
  background: green;
  color: white;
}

<div class="test">
  <span>icon 2</span>
  <span>icon 1</span>
  <span>Lorem ipsum</span>
</div>