1

ホバー効果のあるいくつかの svg 長方形があり、マウスがそれらの上にあるときに長方形の背景色が変更されます。ホバー効果は css で設定します:

.myclass:hover {
    fill: rgb(255,128,0);
}

それとは別に、テキストは各長方形の上に配置されます。テキストと四角形のペアがグループを定義します。

<g>
    <rect class="myclass" x="10" y="10" width="40" height="40" />
    <text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>

ホバー効果は正常に機能しますが、カーソルがテキストの真上にない場合のみです。テキストの真上にある場合、ホバー効果は消えます。

どうすれば修正できますか？

ここにスクリーンショットがあります: 左側ではホバー効果 (背景はオレンジ色) を確認できます。右側では、カーソルが四角形のテキストに当たった場合に効果がどのように消えるかを確認できます:

比較

ありがとうございました

4

2 に答える 2

3

ホバーで無視されるように、テキストに pointer-events="none" を持たせる必要があります。

<g>
    <rect class="myclass" x="10" y="10" width="40" height="40" />
    <text x="30" y="40" font-family="Verdana" font-size="10" fill="blue" pointer-events="none">ESC</text>
</g>
于 2012-08-21T21:25:57.080 に答える
1

問題は、ホバーがテキストの後ろにある要素に割り当てられていることです。したがって、テキストにカーソルを合わせると、技術的には背景に触れなくなります。

私の提案は、クラスを親要素に適用し、それにホバーを割り当てることです。

<g class="myclass">
    <rect x="10" y="10" width="40" height="40" />
    <text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>

これで、CSSは次のようになり、子の「rect」要素をターゲットにします。

.myclass:hover rect {
    fill: rgb(255,128,0);
}
于 2012-08-21T19:46:04.850 に答える