悬停在多个元素上（纯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 （类）和 .icon1 （类）应分别更改其背景颜色
2. 同样，如果我将鼠标悬停在icon2上， .text ， .icon1 和 .icon2 应更改其背景颜色。

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

Answer 1

这非常棘手，但它似乎是纯css中唯一的解决方案：

＆＃13;

＆＃13;

li:hover .text,
.icon-wrapper:hover .icon1,
.icon2:hover {
  background: green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

说明： 第一条css规则可以将任何内容悬停在＆＃34; li＆＃34;中，因此它将改变他孩子的背景＆＃34; .text＆＃34;总是当你悬停li元素。 当您将这两个图标的容器悬停时，第二条规则将起作用 - 然后它将改变＆＃34; .icon1＆＃34;的背景​​。无论你是否完全悬停此图标。 最后一条规则仅用于悬停最后一个图标 - 它位于＆＃34; .icon-wrapper＆＃34;在里面＆＃34; li＆＃34;，所以它也会执行第一和第二规则。然后我们就可以达到目标效果。

Answer 2

如果您使用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>