Hover on multiple elements (pure css)

Question

I have a scenario with a code like this

 <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>

Now all I need is

If I hover on icon1 class, both the .text(class) and .icon1(class) should change its background color respectively.
Similarly if I hover on icon2, .text,.icon1 and .icon2 should change its background color.

I am familiar with combinator selectors in CSS but not able to implement in this case. Here is the screenshot:

If you can give us a _visual layout_, like a drawing, of what you are looking for, there might be a possibility — Ason, Apr 24 '17 at 17:51
css can only change descendant or adjacent elements. You might be able to figure a workaround as LGSon mentions. Check out this question to see what's possible: http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-affect-a-different-element — Z. Bagley, Apr 24 '17 at 17:52
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — hungerstar, Apr 24 '17 at 17:57
It's a bit confusing why, if you hover over icon2, both icon1 and icon2 change their background colors. In your screenshot, that means if they hovered over the inbox icon, the share icon would also change color... — Heretic Monkey, Apr 24 '17 at 18:20

Joint · Answer 1 · 2017-04-24T19:40:02.427

This is very tricky, but it seems to be the only one solution for this in pure css:

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

<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>

Explanation: First css rule will work on hover anything inside "li", so it will change background of his children ".text" always when you hover li element. Second rule will work when you hover the container of this two icons - then it will change background of ".icon1" no matter if you exactly hover this icon. The last one rule is just for hover last icon - it is inside ".icon-wrapper" and inside "li", so it will execute first and second rule too. Then we can achieve target result.

Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See [this Meta question and its answers](http://meta.stackoverflow.com/q/256359/215552) for more information. — Heretic Monkey, Apr 24 '17 at 18:17

Ason · Accepted Answer · 2017-04-24T18:26:16.147

If you use display: flex you can accomplish something like that, where you markup wise have them in backward order, so you can use a sibling selector, though visually, using Flexbox's order property, you swap them back into the right 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>

Awesome!! this is what I needed Thank you!!. – Blah Blah Apr 24 '17 at 18:24 — Blah Blah, Apr 24 '17 at 18:24

Hover on multiple elements (pure css)

2 Answers2