[JavaScript 30일 챌린지] : 22일차

---

<script>
    const triggers = document.querySelectorAll('a');
    const highlight = document.createElement('span');
    highlight.classList.add('highlight');
    document.body.appendChild(highlight);

    function  highlightLink() {
      const linkCoords = this.getBoundingClientRect();
      console.log(linkCoords);
      const coords = {
        width: linkCoords.width,
        height: linkCoords.height,
        top: linkCoords.top + window.scrollY,
        left: linkCoords.left + window.scrollX
      };
      highlight.style.width = `${coords.width}px`;
      highlight.style.height = `${coords.height}px`;
      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;

    }

    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

  </script>

이번에는 마우스를 올렸을 때 하이라이트가 적용되도록 코드를 진행했다.

근데 아무 곳에 올리는 것이 아니라 a태그가 있는 곳에 마우스를 올렸을 때 하이라이트가 들어오도록 코딩을 해주었다.

---