悬停在另一个div上时改变一个div的样式

Question

我试图找出为什么课程的背景＆＃39; b＆＃39;悬停在课堂上时不会发生变化，如this question中那样。我怎样才能让它发挥作用？我也喜欢使用标签。

感谢您的帮助！

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您使用了错误的选择器，您应该使用直接儿童组合或>，因为span位于div内}：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;