Question

我有这样的设置：

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

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

当鼠标悬停在inner_01上时，background-color的{{1}}和inner_02应该会发生变化。
当鼠标悬停在inner_03上时，inner_02的{{1}}和background-color应该会发生变化。
当鼠标悬停在inner_01上时，inner_03的{{1}}和inner_03应该会发生变化。

这是我目前的做法：

将鼠标悬停在background-color ：
上
```
inner_01
```
将鼠标悬停在inner_02 ：
上
```
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
```

我想我错过了某种CSS选择器...... 谢谢你的帮助：）

Answer 1

您可以更改所有inner_* div的颜色，然后将剩余的inner_* div的颜色更改为黑色。

＆＃13;

#wrapper:hover{
  color:red;
}
[id^=inner]:hover{
  color:black;
}

＆＃13;

<div id="wrapper">
  <div id="inner_01">test1</div>
  <div id="inner_02">test2</div>
  <div id="inner_03">test3</div>
</div>

＆＃13;

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>

HTML / CSS - 过渡选择器

2 个答案: