1

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

我们实现了一个系统，让我们可以使用任何 SVG 编辑器设计 UI 小部件。例如，一个简单的播放按钮将有一个背景矩形和一个三角形。在这个小部件中，除了背景之外的所有元素都有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 }
4

2 回答 2

3

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

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

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

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

.a:hover, .a:hover ~ div { stroke: red; }
于 2013-07-12T01:10:41.380 回答
1

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

.a:hover, 
.a:hover ~ .b, 
.a:hover ~ .c {
    color: red;
}
于 2013-07-12T01:11:19.120 回答