CODEWITHSUNDEEP
htmlcsscss-selectors
StarBoy
StarBoy

Reputation: 154

Hover on multiple elements (pure css)

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

  1. If I hover on icon1 class, both the .text(class) and .icon1(class) should change its background color respectively.
  2. 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:

enter image description here

enter image description here

Upvotes: 1

Views: 1309

Answers (2)

Joint
Joint

Reputation: 1218

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.

Upvotes: 1

Asons
Asons

Reputation: 87191

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>

Upvotes: 1

Related Questions