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

Is that possible to change multiple elements appearance on hover without Javascript, based on class name?(是否可以根据类名在没有 Javascript 的情况下更改悬停时的多个元素外观?)

问题描述

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

<div class='a'>你好</div><div class='a'>堆栈</div><div>溢出</div></div>
<div>你</div><div class='b'>是</div><div class='b'>最好的</div></div>
<div>有</div><div class='b'>一个不错的</div><div>日！！</div></div></div>

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

是否有可能实现此行为无需 Javascript?

如果答案是否定的:
如果知道所有具有类 a 的 div 都是连续的 div 是否可能在同一级别(即兄弟姐妹)?

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

在没有容器 <div>s 的更简单的情况下，你可以让它工作一半":

<div class='a'>你好</div><div class='a'>堆栈</div><div>溢出</div><div class='b'>是</div><div class='b'>最好的</div><div>有</div><div class='b'>一个不错的</div><div>日！！</div></div>

然后你可以使用 通用兄弟组合器, 不幸的是，它仅适用于左侧描述的元素之后的元素.因此，例如，如果您将鼠标悬停在包含The Best"的 <div> 上，那么只有那个和a nice"的 <div> 会发生变化背景:

div.b:hover, div.b:hover ~ div.b {背景颜色:#CCCCCC；}

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

I have a structure of divs inside divs, something like:

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

I would like all divs with class a to change the background color when one of them is hovered by mouse. The same for all divs with class b: when one of divs with class b is hovered, all divs with class b should change the background color.

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

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