如何使用 CSS 修改 self 和其他类：hover？答案

【问题标题】：How to modify self and other classes with CSS :hover?如何使用 CSS 修改 self 和其他类：hover？
【发布时间】：2013-07-12 09:27:50
【问题描述】：

我来自 .NET 世界，需要关于 CSS 样式的建议：

我们实现了一个系统，让我们可以使用任何 SVG 编辑器设计 UI 小部件。例如，一个简单的播放按钮将有一个背景矩形和一个三角形。在这个小部件中，除背景之外的所有元素都有pointer-events="none"，以便背景接收所有鼠标事件。但是在将鼠标悬停在背景上时，我们也希望设置所有前景元素的样式。

假设有 .a 和 .b 类，并且所有元素都在同一级别。要在悬停时修改.a，请编写：

.a:hover { stroke: red }

当鼠标悬停在.a 上时修改.b 你写：

.a:hover ~ .b { stroke: red }

但是我怎样才能同时做到这两个呢？当然两个语句都可以写，但是当有另一个类.c 时呢？它是否也需要自己的声明，或者是否有类似的东西：

//fantasy code
.a:hover ~ (.a + .b + .c) { stroke: red }

【问题讨论】：

Is that possible to change multiple elements appearance on hover without Javascript, based on class name?的可能重复
它很相似，但我不会称它为重复项，因为我的所有元素都在同一级别上。我将添加更多上下文。
完全一样的修复，不管他们是否在不同的级别上
另一个问题的接受答案仅在元素处于同一级别时才有效。它不适用于 OP 的问题：“我在 div 中有一个 div 结构，类似于：”。人们搜索的是问题，而不是答案。
抱歉，我本来是想发this link。我的坏

标签： javascript html css svg

【解决方案1】：

他们都需要自己的选择器，但你可以用,分隔它们：

.a:hover, .a:hover ~ .b, .a:hover ~ .c { stroke: red; }

（请注意，~ 是“之后的兄弟”而不是“同时”。）

如果他们有任何其他共同点（假设他们都是 <div>s 或者你可以给他们另一个类），使用它：

.a:hover, .a:hover ~ div { stroke: red; }

【讨论】：

感谢您提供有关 ~ 的信息。是否有另一个符号可以选择同一级别中的所有元素？不仅是之后的兄弟姐妹，还有之前的兄弟姐妹？
@thalm：不，没有——这是对 CSS 选择器的主要抱怨之一。你可能需要 JavaScript。（尽管一些上下文可能也有帮助。）
@thalm：嗯……为什么背景和其他元素在同一水平线上？它不应该包含它们，或者至少是第一个元素吗？
在一个简单的 SVG 文档中，所有元素都位于同一级别是很常见的，因为您只能使用元素构建层次结构。但它是正确的，我们只需要注意背景是第一个，这在视觉上也是有意义的，因为应该首先绘制背景。感谢您的回答，它的工作原理！

【解决方案2】：

您可能可以使用 SASS 循环来完成此操作，但如果只有三个类，我会选择：

.a:hover, 
.a:hover ~ .b, 
.a:hover ~ .c {
    color: red;
}

【讨论】：