Javascript SVG上的滞后鼠标行为

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

我试图简化鼠标行为，只使大区域可悬停（'.parent'）和其他内容{pointer events:none}。然而，有一个很大的滞后。当你将鼠标快速移动到其中一颗牙齿上时，它通常没有反应。只有在慢慢进入它的时候

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

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

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

---

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
}

以下是您的代码笔的更新版本：

---

我还改变了触发鼠标上方的

的方式，但这只是个人喜好。看起来更干净。
正准备添加此作为答案。我们可以把我的Q标记为可能的重复吗？谢谢你的链接，它帮助我准确地理解了发生的事情。我按照你的要求标记了你的Q。出于某种原因，代码笔直接转到了原始版本，而不是我改进的版本（其他牙齿也包括在内）。。。奇怪的但是谢谢！！