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应更改。

这是我的当前方法：

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

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

- LastSecondsToLive

---

那些CSS选择器目前还不存在，也许将来会有。现在，你只能影响那些在其他元素之后出现的元素。一个解决方法是使用JavaScript来分配和删除类。 - Mr Lister

@MrLister哦，那很遗憾，但我很高兴你能快速回答。如果您想发布一个简短的答案（也许带有最小的JavaScript提示），我会很乐意接受 :) - LastSecondsToLive

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>

- nicael

---

比基于JavaScript的解决方案要好得多。不过，我不得不对您的方法进行一些修改，以使其满足OP的要求。 - Mr Lister

@MrLister 您是指过渡效果吗？由于您已经在您的回答中提到了它们，所以有一个困境。我能否编辑我的答案以包括过渡效果，即 [id^=inner]{transition:color 1s;}？ - nicael

实际上我指的是颜色的特定性。你改变了整个#wrapper，而OP只关心更改内部的三个命名div。哦，还有背景颜色而不是文字颜色。 - Mr Lister

@MrLister 好的，就这样吧 :) 只是一个小提醒：在您的情况下，您是针对所有内部div，而不仅仅是inner* ;) - nicael

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>

- Mr Lister