2022/10/17 - TIL

문제

이번에 사이드 프로젝트를 진행하면서 재밌는 현상을 보았다. 처음 랜더를 하였을 때는 아무 것도 보이지 않다가, 부모 element로 hover하였을 때, child가 display되게 css를 작성하였는데, drag가능한 구간에서는 특이하게 hover에 flickering 현상이 있었다.

flickering : 깜빡이는 현상

javascript를 이용하여 해결을 하려고 하면서 알게 된 것은, flickering이 일어난 이유는 hover이벤트 역시 mouseleave와 비슷한 기능을 하면서 hover가 pseudo 로 붙기 때문이었다.

해결

flickering을 해결하기 위해서는, 특정 위치에 mouseover를 이용하여 class를 붙이고 mouseleave를 이용하여 class를 제거하는 방법은, 자식으로 이동하는 경우 역시 mouseleave가 발생하기 떄문에 class를 remove하는 시점을 mouseleave가 아닌 해당 장소와 관련이 없는 장소로 mouseover를 사용하면 해결된다.