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>

Answer 2

把它写出来，这需要在JavaScript中这样的东西（没有任何库）。

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>

编辑：或者，当然，基于@nicael的答案，这个更简单的仅限CSS的解决方案...

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