Javascript 如何使用CSS:hover修改self和其他类？

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

我们实现了一个系统，它允许我们使用任何SVG编辑器设计UI小部件。例如，simpe play按钮有一个背景矩形和一个三角形。在此小部件中，除后台之外的所有元素都具有

指针事件=“无”

，以便后台接收所有鼠标事件。但是当鼠标悬停在背景上时，我们也希望设置所有前景元素的样式

假设存在类

.a

和

.b

，并且所有元素都在同一级别上。要修改悬停时的

.a

，请编写：

.a:hover { stroke: red }

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

要在将鼠标悬停在

.a

上时修改

.b

，请编写：

.a:hover { stroke: red }

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

但我怎么能同时做到这两件事呢？当然可以同时编写这两个语句，但是如果有另一个类

.c

，该怎么办？它是否也需要自己的声明，或者是否有类似的声明：

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

---

它们都需要自己的选择器，但您可以使用

，

：

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

（请注意，

~

在“之后是兄弟姐妹”，而不是“与”。）

如果他们有其他共同点（比如他们都是

或者你可以给他们另一个类），那么使用：

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

---

它们都需要自己的选择器，但您可以使用

，

：

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

（请注意，

~

在“之后是兄弟姐妹”，而不是“与”。）

如果他们有其他共同点（比如他们都是

或者你可以给他们另一个类），那么使用：

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

---

您可能可以通过SASS循环实现这一点，但如果只有三个类，我会选择：

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

---

您可能可以通过SASS循环实现这一点，但如果只有三个类，我会选择：

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

---

它的可能副本是相似的，但我不会称之为副本，因为我的所有元素都在同一级别上。我将添加更多的上下文。这是完全相同的修复，不管它们是否在不同的级别上，只有当元素在相同的级别上时，另一个问题的公认答案才有效。它不适用于OP的问题：“我在div中有一个div结构，类似：”。人们搜索的是问题，而不是答案。对不起，我是想发帖的。我的BAD可能与之类似，但我不会称之为重复，因为我的所有元素都在同一级别上。我将添加更多的上下文。这是完全相同的修复，不管它们是否在不同的级别上，只有当元素在相同的级别上时，另一个问题的公认答案才有效。它不适用于OP的问题：“我在div中有一个div结构，类似：”。人们搜索的是问题，而不是答案。对不起，我是想发帖的。非常感谢你提供的关于~。是否有其他符号选择同一级别中的所有元素？不仅仅是兄弟姐妹之后，还有之前的兄弟姐妹？@thalm：不，没有-CSS选择器的主要问题之一。您可能需要JavaScript。（虽然一些上下文可能也有帮助。）@thalm:Hmm…为什么背景与其他元素处于同一级别？它不应该包含它们吗，或者至少应该是第一个元素吗？在一个简单的SVG文档中，所有元素都位于同一级别是很常见的，因为您只能使用元素构建层次结构。但是它是正确的，我们只需要注意背景是第一个，这在视觉上也是有意义的，因为背景应该首先绘制。谢谢你的回答，很有效！谢谢你在~上提供的信息。是否有其他符号选择同一级别中的所有元素？不仅仅是兄弟姐妹之后，还有之前的兄弟姐妹？@thalm：不，没有-CSS选择器的主要问题之一。您可能需要JavaScript。（虽然一些上下文可能也有帮助。）@thalm:Hmm…为什么背景与其他元素处于同一级别？它不应该包含它们吗，或者至少应该是第一个元素吗？在一个简单的SVG文档中，所有元素都位于同一级别是很常见的，因为您只能使用元素构建层次结构。但是它是正确的，我们只需要注意背景是第一个，这在视觉上也是有意义的，因为背景应该首先绘制。谢谢你的回答，很有效！