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> s:

<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 就能完全处理您的场景的方法。我倾向于其他人所说的关于现在不可能(即使在简化的情况下)的说法。