7

私は SVG を持っています。その中には、可変数の rect 要素を持つ複数の SVG があり、すべてデータ オブジェクトから生成されています。一般的な階層は次のとおりです。

<svg class="parent-svg">
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
</svg>

mouseenter/mouseleave イベントを.child-svg要素にバインドしましたが、マウスが要素間の空白に移動すると、イベントが発生することがわかりました<rect>。mouseenter/mouseleave についての私の理解では、カーソルが子要素に出入りするときに起動してはならないということです。これは、mouseover/mouseout に期待される動作のようです。そしてもちろん、私が理想的に望むのは、mouseenter/mouseleave イベントが各セクション (色を使用して線引きした) を離れたときにのみ発生することです。

関連するフィドルは次のとおりです。http://jsfiddle.net/ysim/yVfuK/4/

編集:要素に高さと幅を指定しようとしまし.child-svgたが、どちらも機能していないようです: http://jsfiddle.net/ysim/gMXuU/3

編集： @pornelの提案に従って修正されたソリューションのフィドルは次のとおりです：http://jsfiddle.net/ysim/HUHAQ/

ありがとう！

4

1 に答える 1

7

私の推測では.child-svg、それ自体には領域がないため、直接ホバーする方法はありません。マウスが離れる<rect>と、マウスも離れ.child-svgます。

SVG にはフロー レイアウトがないため、子は親要素のサイズに影響しません。

ここに解決策があります：http://jsfiddle.net/gMXuU/4/

  • <rect>背景として塗りつぶしなしを追加する
  • addpointer-events:allを追加して、非表示の要素をマウス ポインターに「表示」します。
于 2013-06-21T22:50:20.870 に答える