HTML/CSS - Transition Selector

Question

I have a setup like this:

<div id="wrapper">
  <div id="inner_01"></div>
  <div id="inner_02"></div>
  <div id="inner_03"></div>
</div>

And I want to build a transition with the following properties:

1. When hovering over inner_01 the background-color of inner_02 and inner_03 should change.
2. When hovering over inner_02 the background-color of inner_01 and inner_03 should change.
3. When hovering over inner_03 the background-color of inner_01 and inner_02 should change.

This is my current approach:

• Hover over inner_01:

  #wrapper #inner_01:hover ~ #inner_02 {
    /* Transition *
    transition: background 5s;
  
    /* Color */
    background: #ffee00;
  }
  
  /* Don't know how to effect inner_03 */
  

• Hover over inner_02:

  #wrapper #inner_02:hover ~ #inner_03 {
    /* Transition *
    transition: background 5s;
  
    /* Color */
    background: #ffee00;
  }
  
  /* Don't know how to effect inner_01 */
  

• Hover over inner_03:

  /* Don't know how to effect inner_01/inner_02 */
  

I think I'm missing some kind of CSS-selector... Thanks for the help :)

Answer 1

You can change the color of all the inner_* divs and then change back to black the color of hovered inner_* div.

#wrapper:hover{
  color:red;
}
[id^=inner]:hover{
  color:black;
}

<div id="wrapper">
  <div id="inner_01">test1</div>
  <div id="inner_02">test2</div>
  <div id="inner_03">test3</div>
</div>

Answer 2

Writing it out, this would require something like this in JavaScript (without any libraries).

document.getElementById('inner_02').addEventListener("mouseenter", function(event) {   
  document.getElementById('inner_01').classList.add('newbkgnd');
});

document.getElementById('inner_02').addEventListener("mouseleave", function(event) {   
  document.getElementById('inner_01').classList.remove('newbkgnd');
});

document.getElementById('inner_03').addEventListener("mouseenter", function(event) {   
  document.getElementById('inner_01').classList.add('newbkgnd');
  document.getElementById('inner_02').classList.add('newbkgnd');
});

document.getElementById('inner_03').addEventListener("mouseleave", function(event) {   
  document.getElementById('inner_01').classList.remove('newbkgnd');
  document.getElementById('inner_02').classList.remove('newbkgnd');
});

/* make the divs visible initially. Just for debugging purposes */
#wrapper > div {
 width: 20em; height: 2em;
 margin:.5em 0;
  border:1px solid;
  /* Transition */
  transition: background-color .5s;
}

#inner_01:hover ~ #inner_02,
#inner_01:hover ~ #inner_03,
#inner_02:hover ~ #inner_03,
.newbkgnd {
  /* Color */
  background-color: #ffee00;
}

<div id="wrapper">
  <div id="inner_01"></div>
  <div id="inner_02"></div>
  <div id="inner_03"></div>
</div>

Edit: or, of course, based on @nicael's answer, this much simpler CSS-only solution...

/* make the divs visible initially. Just for debugging purposes */
#wrapper > div {
 width: 20em; height: 2em;
 margin:.5em 0;
  border:1px solid;
  /* Transition */
  transition: background-color .5s;
}

#wrapper:hover > div {
  /* Color */
  background-color: #ffee00;
}
#wrapper:hover > div:hover {
  background-color: inherit;
}

<div id="wrapper">
  <div id="inner_01"></div>
  <div id="inner_02"></div>
  <div id="inner_03"></div>
</div>