mouseenter/leave border-bottom dropdown 덜덜거림 해결

헤더 영역에 보더바텀이 있고

로고 메인메뉴 etc 이렇게 헤더에 3개가 있는 상황!

 

메인메뉴 영역과 서브메뉴 영역에 css hover가 아닌 js mouseenter/leave로 동일한 효과를 주고 있었는데

header의 보더바텀이 1px영역을 차지하다 보니 메인메뉴의 요소가 아니라 판단해서

마우스 커서가 이 문제의 1px영역을 미지의 공간으로 인식해 서브메뉴가 사라지는 이슈가 있었다.

 

그래서 outline으로 대체했다. outline은 영역을 차지하지 않는 간섭이 없는 선이라 말끔히 해결됐다.

대신에 outline-bottom.  top left 이렇게 한면 한면에 지정할 수 없다. 하지만 헤더가 기본적으로 top left right에 맞닿아 있어

1px은 브라우저 밖에서 그려지기 때문에 눈속임을 하면서 해결된 점이라는 것!

 

디바이스 100vw가 아니라면 테두리가 보일테니 컨테이너를 씌우고 좌우위에 1px 작게그려서 overflow.: hidden이나 css hover가 더 잘 작동하는 것 같다.