SVG上的鼠标行为滞后[重复]

Question

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

我试图简化鼠标行为，只使大区域可悬停（'.parent'）和其他东西 {pointer-events:none}。但是，有一个很大的滞后。当您将鼠标快速移入其中一颗牙齿时，它通常没有反应。只有慢慢地进入它。

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

 $('.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 的方式，但这只是个人喜好。对我来说看起来更干净。