I'm currently working on a website with a custom-cursor. (A div chained to the mouse-position.)
I know want to implement an SVG-file into this project, but I can't move the custom-cursor over the SVG.
What's going on and how can I fix this?
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: here
Note: As you can see in my code-snippet, I'm using <object> to implement the SVG. I know that using <img> would solve my problem, but I have to use <object>, because I have a script that reaches inside of the SVG-file and then adds an EventListener('mouseenter') to a shape with a specific id. – As far as I know, that's only possible with <object>, so I have to find a solution that works with <object>.
Easiest solution: Disable the pointer-events on the <object> so the event is passed to the document below, and thus is captured by the 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>