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

时间:2017-04-24 17:47:49

标签: html css css3 css-selectors

我有一个像这样的代码的场景

 <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 应更改其背景颜色。
  3. 我熟悉CSS中的组合选择器,但在这种情况下无法实现。这是截图:

    enter image description here

    enter image description here

2 个答案:

答案 0 :(得分: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;,所以它也会执行第一和第二规则。然后我们就可以达到目标效果。

答案 1 :(得分:0)

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