title: Animated cursor not working with anchors
body: <p>I've searched for hours but can't seem to find the answer. I'm trying to adapt this codepen <a href="https://codepen.io/Nharox/pen/akgEQm" rel="nofollow noreferrer">https://codepen.io/Nharox/pen/akgEQm</a> to work with images and links but 2 things are not working. One is that the position of the cursor doesn't match vertically where the mouse pointer should be after scrolling with either the browser or the mouse wheel, and the other is that clicking the link has no effect. I can't seem to figure out why.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="cursor hidden"&gt;
      &lt;div class="cross"&gt;
          &lt;div class="b b1"&gt;&lt;/div&gt;
          &lt;div class="b b2"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;svg class="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="52" height="52" viewBox="0 0 52 52"&gt;
          &lt;path d="M1,26a25,25 0 1,0 50,0a25,25 0 1,0 -50,0"/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Links</p>
  
  <pre><code>&lt;div class="myrow"&gt;
      &lt;div class="myrow__box"&gt;
          &lt;a href="/link-to-page"&gt;&lt;img alt="" src="/images/myimage.jpg" /&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>.cursor {
  position: absolute;
  z-index: 5;
  width: 50px;
  height: 50px;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.9) rotate(135deg);
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
  &amp;:before, &amp;:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 3px;
      height: 3px;
      background-color: white;
      transition: width 0.5s;
  }
  &amp;:before {
      transform: translate3d(-50%, -50%, 0);
  }
  &amp;:after {
      transform: translate3d(-50%, -50%, 0) rotate(90deg);
      transform-origin: center;
  }
  svg {
      fill: transparent;
      stroke: white;
      stroke-width: 3;
      stroke-dasharray: 160;
      stroke-dashoffset: 160;
      overflow: visible;
      transition: stroke-dashoffset 0.5s;
  }
  &amp;-is-visible {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg);
      &amp;:before, &amp;:after {
          width: 22px;
      }
      svg {
          stroke-dashoffset: 0;
      }
  }
  }
  .myrow {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  &amp;__box {
      cursor: none; 
      position: relative;
      height: auto;
      transform: scale(1);
      &amp;:active {
          &amp;:before {
              background-color: rgba(black, 0.15);
          }
      }
      &amp;:before {
          content: '';
          position: absolute;
          z-index: 1;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: rgba(black, 0);
          transition: background-color 0.3s;
      }
  }
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>(function showCursor() {
  'use strict';
  // Variables
  var boxes = document.querySelectorAll('.myrow__box'),
      cursor = document.querySelector('.cursor'),
      boxPos = [];
  // Get coordinates for the current cursor position
  function getPos(e, el) {
      var xPos = 0,
          yPos = 0;
      xPos = (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos = (el.offsetTop - el.scrollTop + el.clientTop);
      var mouseX = e.clientX - xPos,
          mouseY = e.clientY - yPos; 
      cursor.style.top = '' + mouseY + 'px';
      cursor.style.left = '' + mouseX + 'px';
  }
  // Add event listeners and call fns for the corresponding box
  for (var i = 0; i &lt; boxes.length; i++) {
      boxes[i].addEventListener('mousemove', function(event) {
          var currentBox = this;
          boxPos = getPos(event, currentBox);
      }, false);
      boxes[i].addEventListener('mouseenter', function() {
          this.appendChild(cursor);
           setTimeout(function() {
               cursor.classList.add('cursor-is-visible')
           }, 10);
      }, false);
      boxes[i].addEventListener('mouseleave', function() {
          cursor.classList.remove('cursor-is-visible');
      }, false);
  }
  })();
  </code></pre>
  
  <p>I need the images to be 100% the size of the browser width at any size. The cursor is otherwise working properly and animating exactly as the codepen. Just no clickable link and wrong y position.</p>