html - 将鼠标悬停在另一个 div 上时更改一个 div 的样式

Question

我试图弄清楚为什么将鼠标悬停在类“a”上时类“b”的背景没有改变，如 this question 中所示。 .我怎样才能让它工作？我也希望它能与 a 标签一起使用。

感谢您的帮助!

.a {
  width: 200px;
  height: 200px;
  background: orange;
}
.b {
  background: lightgreen;
}
.a:hover + .b {
    background: #ccc;
}

<div class='a'>
  <span class='b'>here</span>
  <span class='b'><a href='http://www.google.com'>here</a></span>
</div>

Answer 1

您使用了错误的选择器，您应该使用直接子组合器或>，因为span位于div:

.a {
  width: 200px;
  height: 200px;
  background: orange;
}
.b {
  background: lightgreen;
}
.a:hover > .b {
    background: #ccc;
}

<div class='a'>
  <span class='b'>here</span>
  <span class='b'><a href='http://www.google.com'>here</a></span>
</div>