html - 是否可以根据类名在没有 Javascript 的情况下更改悬停时的多个元素外观？

Question

我在 div 中有一个 div 结构，类似于:

<div>
    <div>
        <div class='a'>Hello</div>
        <div class='a'>Stack</div>
        <div>Overflow</div>
    </div>
    <div>
        <div>You</div>
        <div class='b'>Are</div>
        <div class='b'>The Best</div>
    </div>
    <div>
        <div>Have</div>
        <div class='b'>a nice</div>
        <div>Day !!</div>
    </div>
</div>

我希望所有具有 a 类的 div 在其中一个被鼠标悬停时更改背景颜色。对于类 b 的所有 div 都一样:当悬停类 b 的 div 之一时，所有类 b 的 div 应该改变背景颜色。

是否可以不使用 Javascript 实现此行为？

如果答案是否定的:
如果已知所有 a 类的 div 都是连续的 div 是否可能在同一级别(即 sibling )？

如果需要，我还可以将其他类添加到 div。

Answer 1

在没有容器的更简单的情况下，您可以让它“半工作”<div>小号:

<div>
  <div class='a'>Hello</div>
  <div class='a'>Stack</div>
  <div>Overflow</div>
  <div class='b'>Are</div>
  <div class='b'>The Best</div>
  <div>Have</div>
  <div class='b'>a nice</div>
  <div>Day !!</div>
</div>

然后你可以使用 general sibling combinator , 不幸的是，它只适用于 在 左侧描述的元素之后的元素。因此，例如，如果您将鼠标悬停在 <div> 上包含“最好的”，只有那个和“一个不错的”<div>会有一个改变的背景:

div.b:hover, div.b:hover ~ div.b {
    background-color:#CCCCCC;
}

不过，我无法想出一种仅通过 CSS 就能完全处理您的场景的方法。我倾向于其他人所说的现在不可能(即使在简化的情况下)。