如何用CSS修改自我和其他类：悬停？

Question

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

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

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

.a:hover { stroke: red }

要在.b上悬停时修改.a，请写下：

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

但我怎么能同时做到这两件事？当然可以写两个语句，但是当有另一个类.c时会怎样？它是否需要自己的陈述，或者是否有类似的东西：

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

Answer 1

他们都需要自己的选择器，但您可以将它们与,：

分开

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

（请注意~是“sibling after”而不是“与”同时“。”

如果他们有其他共同点（比如说他们都是<div>或者你可以给他们每个人一个类），那就用它：

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

Answer 2

你可以用SASS循环完成这个任务，但是如果只有三个类我会去：

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