HTML/CSS - 过渡选择器

Question

我有这样的设置:

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

我想构建一个具有以下属性的转换:

1. 将鼠标悬停在 inner_01 上时，inner_02 和 inner_03 的 background-color 应该会发生变化。
2. 将鼠标悬停在 inner_02 上时，inner_01 和 inner_03 的 background-color 应该会发生变化。
3. 将鼠标悬停在 inner_03 上时，inner_01 和 inner_02 的 background-color 应该会发生变化。

这是我目前的做法:

• 将鼠标悬停在 inner_01 上:

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

• 将鼠标悬停在 inner_02 上:

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

• 将鼠标悬停在 inner_03 上:

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

我想我缺少某种 CSS 选择器... 感谢您的帮助:)

Answer 1

您可以更改所有 inner_* div 的颜色，然后将悬停的 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>