SVGのマウス遅れを遅らせる

Question

私が構築しているウェブアプリの歯の選択メニューに取り組んでいます。私はSVGを見つけ、それを変更しています。

マウスの振る舞いを単純化しようとしましたが、大きな領域をホバーブル（ '.parent'）と他のもの{pointer-events：none}のみにしました。しかし、大きな遅れがあります。マウスを歯の1つにすばやく移動させると、通常は反応しません。それにゆっくりと移動するときだけ。

これも表示されますか？私に何ができる？

$('.parent').mouseover(function(){ 
    $(this).css('fill', 'red'); 
}); 

$('.parent').mouseleave(function(){ 
    $(this).css('fill', 'none'); 
}); 

link to the codepen playground

Answer 1

CSSの簡単な変更は、問題を修正しました：

svg *{ 
    pointer-events: none; // Disable pointer-events for all elements inside the SVG 
} 
svg .parent{ 
    pointer-events: all; // Enable pointer-events only on certain elements 
} 

ここにあなたのcodepenの更新されたバージョンです：https://codepen.io/etiennemartin/pen/yovzZb

は、私はまた、あなたが引き金方法を変更mouseoverですが、これは個人的な好みです。私にはきれいに見えます。