svg分组元素共同悬停

Question

svg元素上的hover是否可能导致具有相同类的其他元素在没有jQuery的情况下悬停？或者我是否必须将两者分成外组？

我在内联svg里面有以下几组：

<g class="class1">
    <path....>
    <path....>
</g>

<g class="class1">
    <path....>
    <path....>
</g>

然后我在我的CSS中：

class1 {
 ...
}

class1:hover {
 ...
}

Answer 1

我想你不能直接做到，但你可以通过向父元素添加id来实现它，不需要类，如：

#circles:hover circle{
  fill: Wheat;
}

<svg id="circles" width="100" height="260" >
   <circle cx="50" cy="50" r="40" stroke="Tomato" stroke-width="4" fill="Tomato" />
   <circle cx="50" cy="140" r="40" stroke="Tomato" stroke-width="4" fill="Aquamarine"/>  
</svg>