SVG наведите курсор мыши на одну фигуру и оживите другую

Question

Я новичок в кодировании SVG, поэтому, пожалуйста, держитесь со мной. Я видел похожие темы на мой вопрос, но они не совсем то, что я пытаюсь понять в корне. Для простоты, скажем, у меня есть (2) круги, которые я хочу понять, как анимировать один, когда я нахожусь над другим?

HTML:

<svg version="1.1" id="EXAMPLE" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
     viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">

<g id="g1">
    <circle id="c1" class="cls1" cx="255.5" cy="249.97" r="96.93"/>
</g>
<g id="g2">
    <circle id="c2" class="cls2" cx="61.32" cy="55.79" r="49.6"/>
</g>
</svg>

CSS:

.cls1{
cursor: pointer;
}
.cls1:hover (OTHER CIRCLE){
animation-name: moveCircle;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: normal;
}
@keyframes moveCircle
{
from
{
    transform: translateX(0) translateY(0);
}
to
{
    transform: translateX(0) translateY(50px);
}

}

Есть ли правильные обозначения после объявления наведения на другой элемент? Например, если я вызываю класс или идентификатор, например # g1: hover или .cls1: hover, что я могу указать после, чтобы повлиять на другой класс или идентификатор? Есть ли способ пометить # g1: hover ~ # g2, чтобы при наведении курсора на группу 1 он анимировал «moveCircle» в группе 2.