let bar = document.querySelector('span');
let menu = document.querySelectorAll('a');
for(let i=0; i<menu.length; i++){
menu[i].addEventListener('mouseenter',function(e){
let pos = e.currentTarget.offsetLeft;
bar.style.opacity = "1";
bar.style.left = pos + "px"
})
}
document.querySelector('div').addEventListener('mouseleave',function(e){
bar.style.opacity = "0";
});
<div>
<a href="#">메뉴1</a>
<a href="#">메뉴2</a>
<a href="#">메뉴3</a>
<a href="#">메뉴4</a>
<span></span>
</div>
마우스 움직일때마다 언더라인 따라다니게..
728x90
반응형
'IT > UI | UX' 카테고리의 다른 글
[UI] setTimeout과 clearTimeout 활용 (0) | 2020.08.24 |
---|---|
[UI] 제이쿼리 UI 사용해서 직소퍼즐 만들기 (0) | 2020.08.24 |
[UI]오픈 날짜에 맞춰서 배너 show하기 (0) | 2020.07.28 |
[Swiper] 스와이퍼 업데이트 (0) | 2020.05.19 |
[제플린] 퍼블리셔가 제플린 사용하기 (9) | 2019.11.27 |