Question

我正在尝试将自定义光标移到某些svg文件上，以向用户指示单击的可能性。

我从https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals声明了一个tuto，将jquery部分更改为javacript，并添加了游标的自定义项（css和JS）

不幸的是，当我添加这两行代码时：

    customCursor.style.top =  (e.pageY-10)+"px";
    customCursor.style.left = (e.pageX-10)+"px";

它使svg图像悬停“发抖”（对不起，我找不到更好的词来形容它）。有时甚至没有突出显示该元素，我也注意到在chrome和firefox上的行为甚至不同

See the code

如果我什至删除了其中一行，则svg文件看起来也不错，不再进行游标自定义，但是它的表现很好。

我的想法已经用光了，我需要新鲜的想法来解决它....

预先感谢您的帮助。

Answer 1

此刻，光标正在拦截指针事件并导致悬停被移除。然后摆脱光标，恢复悬停等，等等。

为光标提供CSS属性指针事件：none;

cursor {
            position: absolute;
            width: 20px;
            height: 20px;
            border: 1px solid red;
            border-radius: 50%;
            z-index:10;
            pointer-events: none;
        }

自定义光标创建颤抖的svg

1 个答案: