2

多くの異なる形状の塗りつぶし色を決定するために、SVG ファイルに 2 つのクラスを作成しました。さまざまな形状がグループ化されており、ホバー時に異なる形状に変更したいと考えています。ホバーすると、クラス「test1」(グループ内にある) のすべての塗りつぶしが、たとえば #000000 に変更され、クラス「test2」の不透明度が 0.8 に設定されます。

<style type="text/css" >
    .test1 { fill:  #006600;}
    .test2 { fill:  #0000FF; opacity: 0.3;}
    g:hover { ????? }
</style>

手がかりはありますか？

4

1 に答える 1

1

次のようなマークアップを想定しています...

<g>
  <rect class="test1" ... />
  <rect class="test1" ... />
  <rect class="test2" ... />
  <rect class="test2" ... />
</g>

あなたのCSSは...

.test1 { fill:  #006600;}
.test2 { fill:  #0000FF; opacity: 0.3;}
g:hover .test1 { fill: #000; }
g:hover .test2 { opacity: 0.8; }
于 2012-11-22T06:03:39.947 に答える