CODEWITHSUNDEEP
javascriptsvghtml-object
Simon R.
Simon R.

Reputation: 151

<div> collides with <object>

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>.

Update:

I did some more testing and found out that the: **window.addEventListener('mousemove'…** is actually not triggering, when hovering over the **object**.

Upvotes: 1

Views: 56

Answers (1)

0stone0
0stone0

Reputation: 44009

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>

Upvotes: 1

Related Questions