是否可以更改多个元素外观悬停没有Javascript，基于类名？ [英] Is that possible to change multiple elements appearance on hover without Javascript, based on class name?

问题描述

我有 div 在 div 中的结构，例如：

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>

我想要所有 div a 可在鼠标悬停其中一个时更改背景颜色。对于所有 div 与 b ： div s > code>应该更改背景颜色。

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.

是否可以实现此行为无Javascript ？

如果答案是否定的：
如果已知所有 div 与类 a 是连续的 div 在同一级别（即兄弟姐妹）？

If the answer is no:
Is that possible if known that all divs with class a are consecutive divs in the same level (i.e. siblings) ?

推荐答案

您可以在没有容器< div> s的简单情况下得到它半工作：

You can get it "half working" in the simpler case where there are no container <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 ，不幸的是，它只适用于之后元素在左手侧。例如，如果你在包含The Best的< div> 上方悬停，只有那个和a nice< div> ; 将有一个改变的背景：

Then you could use the general sibling combinator, with the unfortunate caveat that it only works for elements that come after the element described on the left-hand side. So, for example, if you hovered over the <div> containing "The Best", only that and the "a nice" <div> would have a changed background:

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

我无法想出一个完全照顾的方法的情况通过CSS单独，虽然。我倾向于其他人所说的不可能（即使在简化的情况下）现在。

I wasn't able to come up with a way that would fully take care of your scenario through CSS alone, though. I'm leaning towards what the others have said about it not being possible (even in the simplified case) right now.

这篇关于是否可以更改多个元素外观悬停没有Javascript，基于类名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！