是否可以根据类名在没有 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，这可能吗（即兄弟姐妹）？

如果需要的话，我还可以向 div 添加其他类。

Answer 1

在没有容器

的更简单情况下，您可以让它“半工作”：

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

然后您可以使用 通用兄弟组合器，不幸的是它只适用于元素之后的元素描述在左侧。因此，例如，如果您将鼠标悬停在包含“The Best”的

上，则只有该内容和“a Nice”

才会发生变化背景：

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

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

Answer 2

我想不出任何解决方案，除了有 css-parent-selectors （而且，据我自己和谷歌所知，那些不存在）。如果存在类似的情况，您可以执行诸如选择悬停元素的顶部父级之类的操作，然后选择该顶部元素中类的所有元素（看起来像 .a ) - 但是，如上所述，这个选择器不存在，所以你的问题的答案是：否

Answer 3

不，没有 Javascript 就不行。 CSS 选择器旨在将样式应用于单独匹配选择器的每个元素，因此根据设计，这种情况不会发生。

来源

http://www.w3.org/TR/CSS2/selector .html#选择器语法