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>