In a React application, I'm returning an SVG tag from a component. The SVG consists of a ring, and groups of elements positioned around it. Each group contains a shape (circle or rect) and a path depicting a number overlaying and identifying the shape.
For a minimum working example: https://codepen.io/notthelewis/pen/gOGRZQQ
Each group can be either active or inactive. In the inactive state, I want the background colour of the shape to change on hover , but I want the path's fill to stay the same colour. Current behaviour of the codepen works when hovering over the shape itself, but reverts when hovering over the path (number) element, which is inside the shape; meaning that the fill of the shape returns to default rather than the chosen hover colour.
In looking around, I tried a few solutions, but could not get the selectors to perform quite how I want.
To surmise:
.inactive path:hovershould somehow target:is(rect, circle)contained in the same group.inactive path's stroke property should remain unaffected.
I've tried the following (to no avail!):
.inactive ~ path:hover {
fill: red;
}
.inactive path:hover ~ {
fill: red;
}
.inactive path:hover+rect {
fill: red;
}
.inactive :is(rect, circle)+path:hover {
fill: red;
}
I did find the has selector, but it doesn't appear to be adopted anywhere meaningful...
https://caniuse.com/css-has
And the has selector is also mentioned alongside the general successor selector answer provided in this SO question:
Is there a "previous sibling" selector?
