svgグループ化された要素の共同ホバー

svg要素のhoverは、同じクラスの他の要素がjQueryを使わなくてもホバーする可能性がありますか？それとも、2つを外側のグループにする必要がありますか？svgグループ化された要素の共同ホバー

私は次のグループのインラインSVGの内側にあります。

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

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

私はその後、私のCSSを持っている

：

class1 { 
... 
} 

class1:hover { 
... 
}

出典

2017-08-22 TheRealPapa

'.class1：hover〜.class1 {styles goes here ...}'を使用できます。 –

しかし、これは、ホバリングされた要素の前の兄弟である要素を選択しません。次の兄弟のためだけに機能します。以前の兄弟を選択するには、jQueryを使用する必要があります。 –

私はあなたがそれを直接行うことができないと思いますが、あなたはそれを達成することができます親要素に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>

出典

2017-08-22 07:20:29 Tedds

svgグループ化された要素の共同ホバー

答えて

関連する問題