[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
Author And Source
이 문제에 관하여([JS30] - 26) Stripe Follow Along Dropdown), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gygy/JS30-26-Stripe-Follow-Along-Dropdown저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)