<div> 碰撞<object>

Question

我目前正在开发一个带有自定义光标的网站(链接到鼠标位置的div。(

我知道我想在这个项目中实现一个SVG文件，，但我无法将自定义光标移动到SVG上

发生了什么事，我该如何解决？

const cursor = document.querySelector(".cursor");
window.addEventListener('mousemove', function(e){
cursor.style.top = e.y + "px";
cursor.style.left = e.x + "px";
});

* {
cursor: none;
}
.cursor {
position: fixed;
z-index: 10;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: black;
transform: translate(-50%, -50%);
pointer-events: none;
}
#testObject {
position: absolute;

width: 300px;
height: 300px;
}

<div class="cursor"></div>
I can't hover over the object below. (The cursor get's stuck on the edge.)<br><br>
<object data="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/SVG_example_markup_grid.svg/2560px-SVG_example_markup_grid.svg.png" type="image/svg+xml" id="testObject"></object>

JSFiddle：这里是

---

注意：正如您在我的代码片段中看到的，我正在使用<object>来实现SVG。我知道使用<img>可以解决我的问题，但我必须使用<object>，因为我有一个脚本，它可以到达SVG文件内部，然后将EventListener("useenter"(添加到具有特定id的形状中。据我所知，这只适用于<object>，所以我必须找到一个适用于<object>的解决方案

更新：

我做了更多的测试，发现：**window.addEventListener('musemove'…**(在悬停在**对象**上时实际上没有触发。

Answer 1

最简单的解决方案：禁用<object>上的pointer-events，以便将事件传递到下面的文档，从而由mousemove:捕获

#testObject {
...
pointer-events: none;
...
}

const cursor = document.querySelector(".cursor");
window.addEventListener('mousemove', function(e){
cursor.style.top = e.y + "px";
cursor.style.left = e.x + "px";
});

* {
cursor: none;
}
.cursor {
position: fixed;
z-index: 10;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: black;
transform: translate(-50%, -50%);
pointer-events: none;
}
#testObject {
position: absolute;
pointer-events: none;

width: 300px;
height: 300px;
}

<div class="cursor"></div>
I <strike>can't</strike> CAN hover over the object below.<br><br>
<object data="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/SVG_example_markup_grid.svg/2560px-SVG_example_markup_grid.svg.png" type="image/svg+xml" id="testObject"></object>