3

CSS を使用して SVG グループを強調表示したいと思います。次のコードを試しました

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style type="text/css">
    * {stroke: black; fill: white}
    .A:hover {fill: orange}
    .B:hover {fill: blue}
  </style>
  <g class="A">
    <circle cx="100" cy="100" r="50" />
    <circle cx="250" cy="100" r="50" />
  </g>
  <circle class="B" cx="400" cy="100" r="50" />
</svg>

ただし、ホバーしても最初の 2 つの円はオレンジ色に変わりません (Safari および Opera の場合)。私は何を間違っていますか？

4

1 に答える 1

5

塗りつぶしは hovered に設定され<g>ますが、他のセレクターは円の塗りつぶしをオーバーライドします。

交換：

.A:hover {fill: orange}

と：

.A:hover * {fill: orange}

フィドルを参照してください。

于 2013-06-04T13:41:50.013 に答える