title: <div> collides with <object>
body: <p>I'm currently working on a website with a custom-cursor. <em>(A div chained to the mouse-position.)</em></p>
  <p>I know want to implement an SVG-file into this project, <strong>but I can't move the custom-cursor over the SVG.</strong></p>
  <p>What's going on and how can I fix this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const cursor = document.querySelector(".cursor");
  
  window.addEventListener('mousemove', function(e){
      cursor.style.top = e.y + "px";
      cursor.style.left = e.x + "px";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cursor"&gt;&lt;/div&gt;
  
  I can't hover over the object below. (The cursor get's stuck on the edge.)&lt;br&gt;&lt;br&gt;
  &lt;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"&gt;&lt;/object&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>JSFiddle: <a href="https://jsfiddle.net/Simon_Reiter/e8j4oy3d/29/" rel="nofollow noreferrer">here</a></p>
  <hr />
  <p><em>Note: As you can see in my code-snippet, I'm using <code>&lt;object&gt;</code> to implement the SVG. I know that using <code>&lt;img&gt;</code> would solve my problem, but I have to use <code>&lt;object&gt;</code>, 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 <code>&lt;object&gt;</code>, so I have to find a solution that works with <code>&lt;object&gt;</code>.</em></p>
  <h2>Update:</h2>
  I did some more testing and found out that the: **window.addEventListener('mousemove'…** is actually not triggering, when hovering over the **object**.