我有一个像这样的代码的场景
<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>
现在我需要的只是
答案 0 :(得分:1)
这非常棘手,但它似乎是纯css中唯一的解决方案:
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;
说明: 第一条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>