SVG 上的滞后鼠标巴哈维

Question

我正在为我正在构建的网络应用程序开发牙齿选择菜单。我找到了一个 SVG，我正在修改它。

我试图简化鼠标行为，只使大区域悬停('.parent'(和其他东西{指针事件：无}。但是，存在一个很大的滞后。当您将鼠标快速移动到其中一个牙齿时，它通常不会响应。只有慢慢地进入它。

你也看到了吗？我能做什么？

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

链接到 Codepen 游乐场

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
}

下面是代码笔的更新版本：https://codepen.io/etiennemartin/pen/yovzZb

我还改变了你触发mouseover的方式，但这只是个人喜好。对我来说看起来更干净。