Apply :hover to all children of an svg group-CodePudding

How do I get all the elements of an svg group to change their fill color on hover?

The example below does not work at all. If I use .sgroup circle:hover only the circle under the pointer works not both.

.sgroup:hover {
    fill: green;
}

<div>
<svg width="200" height="200">
    <g >
        <circle cx="50" cy="50" fill="pink" r="10" ></circle>
        <circle cx="150" cy="150" fill="purple" r="10" ></circle>
    </g>
</svg>
</div>

CodePudding user response：

Please see below. I assume this is what you're looking for?

.sgroup:hover circle {
    fill: green;
}

<div>
<svg width="200" height="200">
    <g >
        <circle cx="50" cy="50" fill="pink" r="10" ></circle>
        <circle cx="150" cy="150" fill="purple" r="10" ></circle>
    </g>
</svg>
</div>