[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()

CSS 스타일 선언 객체의 속성에 대한 새 값을 설정한다.

style.setProperty(propertyName, value, priority);

매개변수

propertyName

DOMString수정할 CSS 속성 이름(하이픈 대소문자)

value 선택 과목

DOMString새 속성 값을 포함

priority

CSS속성의 우선순위 지정

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)`);

coords 객체를 만들어 각각 지정한 프로퍼티를 불러왔다.

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty