HTML/CSS - 过渡选择器答案

【问题标题】：HTML/CSS - Transition SelectorHTML/CSS - 过渡选择器
【发布时间】：2016-10-05 04:50:50
【问题描述】：

我有这样的设置：

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

我想建立一个具有以下属性的过渡：

当悬停在 inner_01 上时，inner_02 和 inner_03 的 background-color 应该会发生变化。
当悬停在inner_02 上时，inner_01 和inner_03 的background-color 应该会发生变化。
当悬停在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 选择器... 感谢您的帮助:)

【问题讨论】：

那些 CSS 选择器还不存在。也许在未来。现在，你只能影响其他事情之后的事情。一种解决方法是使用 JavaScript 分配和删除类。
@MrLister 哦，这很可悲，但我很高兴您的快速回答。如果您想发布一个简短的答案（可能带有最小的 JavaScript 提示），我会很乐意接受它:)

标签： html css css-selectors css-transitions

【解决方案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>

【讨论】：

比基于 JavaScript 的解决方案要好得多。不过，我不得不对您的方法进行一些修改，以使其对 OP 满意。
@MrLister 你是说过渡吗？正如您在回答中已经提到的那样，这是一个两难的选择。我可以编辑我的答案以包括转换，即[id^=inner]{transition:color 1s;}？
其实我的意思是颜色的特殊性。您更改了所有#wrapper，而 OP 只关心更改内部的三个命名 div。哦，还有背景颜色而不是颜色。
@MrLister 好的，就这样吧 :) 只是一个小提示：在您的情况下，您的目标是所有内部 div，而不仅仅是 inner* ;)

【解决方案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>

【讨论】：