2019-4-9

    const triggers = document.querySelectorAll('a');
    triggers.forEach(trigger => trigger.addEventListener('mouseenter', highlightLink));
    const highlight = document.createElement('span');
    highlight.classList.add('highlight');
    document.body.appendChild(highlight);
    function highlightLink() {
      const cords = this.getBoundingClientRect();
      const width = cords.width;
      const height = cords.height;
      const top = cords.top + window.scrollY;
      const left = cords.left + window.scrollX;
      highlight.style.width = `${width}px`;
      highlight.style.height = `${height}px`;
      highlight.style.transform = `translate(${left}px, ${top}px)`
    }