SVG上的滯後鼠標行爲

我正在爲我正在構建的網絡應用程序選擇一個牙齒菜單。我找到了一個SVG，我正在修改它。SVG上的滯後鼠標行爲

我試圖簡化鼠標的行爲，使得只有大面積可擴展（'.parent'）和其他東西{指針事件：無}。但是，有一個重大的滯後。當你將鼠標快速移動到其中一個牙齒時，它通常不會響應。只有在慢慢地進入它時。

你也看到了嗎？我能做什麼？

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

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

link to the codepen playground

來源

2017-08-18 Nils Sens

在解決了該問題的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，但這只是個人偏好。對我來說看起來更清潔。

來源

2017-08-18 15:50:03

即將添加此作爲答案。我們可以標記我的Q作爲可能的重複https://stackoverflow.com/questions/17616233/css-hover-sometimes-doesnt-work-on-svg-paths？ –

感謝您的鏈接，它幫助我瞭解到底發生了什麼。我按照你的要求標記了你的Q. –

出於某種原因，該codepen直接到原來的版本，而不是我已經改善的（其他牙齒也包括在內）......怪異的。但是，謝謝！ –

SVG上的滯後鼠標行爲

回答

相關問題