CSS设置divb颜色，当diva：hover [重复]答案

【问题标题】：CSS set divb color, when diva:hover [duplicate]CSS设置divb颜色，当diva：hover [重复]
【发布时间】：2016-11-01 07:11:58
【问题描述】：

我想，当第一课悬停时，第二课的颜色是白色的。

<div class="diva">This is the first class</div>

<div class="divb">This is the second class</div>

<style>
.diva:hover .divb {
  color:#fff;
}
</style

但是，这行不通。我该怎么做？

【问题讨论】：

标签： html css class colors

【解决方案1】：

CSS 3 general sibling combinator~ 可以在您的情况下用于为另一个类提供悬停效果。

两个序列所代表的元素[E1 ~ E2]共享同一个文档树中的父级和第一个序列表示的元素 [E1] 在由第二个 [E2]。

如果用户将鼠标悬停在diva 上，下面的代码将divb 的字体颜色设置为白色。如果元素不在相邻位置，则可以使用此组合器

<html>
   <body>
      <div class="diva">Hover over the first element</div>
      <div class="divb">I will change my color</div>
      <style>
         .diva:hover ~ .divb {
         color:#fff;
         }
      </style>
</html>

【讨论】：

【解决方案2】：

您正在寻找adjacent sibling selector (CSS 2.1) +。引用规格

如果 E1 和 E2 在文档树和 E1 紧接在 E2 之前

.diva:hover + .divb {
  color: #fff;
  background-color: green;
  padding-left: 4em;
}

<div class="diva">Hover over first div to change color of sibling</div>
<div class="divb">This is the second class</div>

【讨论】：

为了将来的参考，请寻找重复的内容以解决诸如此类极为常见的问题，而不是回答它们。
我不同意你上面列出的问题是重复的。
没关系，然后随意摆出一个替代副本。此外，您是否阅读了超出公认答案的内容？得票最高的答案准确地说明了如何做到这一点。
是的，我阅读了描述此问题的答案，但我认为除非问题相同，否则不应将问题标记为重复问题，而不仅仅是当一个给定的答案可以帮助解决问题时。
当然，这是一个完全有效的观点。不过，对于这样的问题，您可以建议关闭许多其他重复项，这对未来的访问者来说比在多个问题中具有不同完整性的分散答案更有用。（例如stackoverflow.com/questions/6867257/… 或相关的stackoverflow.com/questions/4502633/…）只是为了将来要记住的事情。