[JS30] - 26) Stripe Follow Along Dropdown

マウスが止まるたびにドロップダウンメニューが表示されます

🧀 Element: mouseenter event

🧀 Element: mouseleave event

const triggers = document.querySelectorAll('.cool > li');
triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));

マウスの各ボタンのドロップダウン内容のサイズに合わせて、メニューの背景のサイズを変更します。

🧀 Element.getBoundingClientRect()

🧀 CSSStyleDeclaration.setProperty()

パラメータ

propertyName

n.選択科目

priority

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

  const coords = {
    width: dropdownCoords.width,
    height: dropdownCoords.height,
    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)`);

Reference