【发布时间】：2022-01-22 01:09:48
【问题描述】：
在一个 React 应用程序中，我从一个组件返回一个 SVG 标记。 SVG 由一个环和围绕它的一组元素组成。每个组都包含一个形状（圆形或矩形）和一个路径，该路径描绘了一个覆盖和标识该形状的数字。
对于一个最小的工作示例： https://codepen.io/notthelewis/pen/gOGRZQQ
每个组可以是活动的或非活动的。在非活动状态下，我希望形状的背景颜色在 hover 时改变，但我希望路径的填充保持相同的颜色。 codepen 的当前行为在悬停在形状本身上时有效，但在悬停在形状内部的路径（数字）元素上时恢复；这意味着形状的填充恢复为默认值，而不是选择的悬停颜色。
环顾四周，我尝试了一些解决方案，但无法让选择器完全按照我的意愿执行。
推测：
-
.inactive path:hover应该以某种方式定位：is(rect, circle)包含在同一组中 -
.inactive path的 stroke 属性不受影响。
我尝试了以下方法（无济于事！）：
.inactive ~ path:hover {
fill: red;
}
.inactive path:hover ~ {
fill: red;
}
.inactive path:hover+rect {
fill: red;
}
.inactive :is(rect, circle)+path:hover {
fill: red;
}
我确实找到了has 选择器，但它似乎没有在任何有意义的地方被采用...
https://caniuse.com/css-has
在这个 SO 问题中提供的 general successor 选择器答案旁边还提到了 has 选择器：
Is there a "previous sibling" selector?
【问题讨论】：
-
你为什么使用极其复杂的
<path>而不是<text>？ -
SVG 新手，从 Figma 生成基础图像，这就是他们出来的样子
-
为什么不只是
g.inactive:hover rect { fill: grey; }- 或者我错过了什么？ -
因此，当悬停在文本上时，悬停离开
rect并选择path，因此形状上的填充恢复为白色。示例中 CSS 的第 5 行和第 6 行我完全按照您在其中提到的那样做，但是如果您将鼠标悬停在该形状中包含的文本上，这就是问题所在。 -
其实，忽略那个......你是对的！我选择的是特定元素而不是组:')