mouseenter
JS로 호버해 img 변경시, 이미지 깜빡임 현상 없애기
CSS의 hover만으론 변경이 불가한 상황이 있어 JS로 처리했다. 하지만 이미지가 최초에 mouseenter했을 때 한번 깜빡거리는 문제가 발생했다. 이유는, mouseenter 했을 때의 이미지를 미리 불러오지 않고 뒤늦게 불러오기 때문이였다. 그래서 이미지를 미리 불러오는 작업을 했다. 이렇게 미리 호출하면, 깜빡임현상이 사라진다. logout_bg_hover.png가 미리 잘 불러와졌다 !!
내비게이션 - 특정 위치 지나면 닫기
지난번에 작업 도중 문제가 되어 해결한다고 애먹었었는데, 1년전이라 기억이 나질 않아서 또 1시간이상 애먹었다.... 자주 쓰일 문제일 것같아 기록으로 남긴다. ○ 기존 동작방식 1. 버튼에 마우스를 올리면 하단에 내비 열림. 2. 내비에 마우스를 올리고, 마우스가 내비영역을 벗어나면 내비 닫힘. 여기서 문제는, 1번 동작 후 내비가 마우스에 올라가지 않고 다른 곳으로 가면, 내비 안닫힘. ● 그래서 아래처럼 해결. 1. 버튼, 내비영역 모두에 event를 걸어서 isNavShow 열릴지 닫힐지 변수로 체크한다. 2. 이때, setTimeout이 포인트인데, 0.05초안에 마우스가 버튼/내비영역에 올라가지 않으면, 내비는 닫힘.