Question

我正在为我建造的网络应用程序选择牙齿选择菜单。我发现了一个SVG并且我正在修改它。

我试图简化鼠标行为，只使大区域可以移动（＆＃39; .parent＆＃39;）和其他东西{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的方式，但这只是个人偏好。看起来更干净。

在SVG上滞后于鼠标行为

1 个答案: