js challenge day 26

Follow Along Nav

Code

  <script>
    const triggers = document.querySelectorAll('.cool > li');
    const background = document.querySelector('.dropdownBackground');
    const nav = document.querySelector('.top');

    const handleEnter = (e) => {
      e.target.classList.add('trigger-enter');
      setTimeout(() => e.target.classList.contains('trigger-enter') && e.target.classList.add('trigger-enter-active'), 100);
      background.classList.add('open');

      const dropdown = e.target.querySelector('.dropdown');
      const dropdownCoords = dropdown.getBoundingClientRect();
      const navCoords = nav.getBoundingClientRect();

      const coords = {
        height: dropdownCoords.height,
        width: dropdownCoords.width,
        top: dropdownCoords.top - navCoords.top,
        left: dropdownCoords.left - navCoords.left
      };
      background.style.setProperty('width', `${coords.width}px`);
      background.style.setProperty('height', `${coords.height}px`);
      background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
    }
    const handleLeave = (e) => {
      e.target.classList.remove('trigger-enter', 'trigger-enter-active');
      background.classList.remove('open');
    }


    triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
    triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
  </script>

배운 점 & 느낀 점

특정 블록에 마우스를 올리면 다른 블록을 띄워주는 간단한 과제였습니다.