hover 이벤트로 translateY 조절 시 경계선에서 버벅임이 무한 반복되는 이슈를 해결할 수 있는 방법이 있을까요?
본문
<style>
.item { position: relative; width: 472px; height: 686px; transition: transform 250ms; }
.item.hover { transform: translateY(-20px); }
</style>
코드는 위와 같고요,
hover 시에 정상 작동하긴 하는데
* 하단 경계선에 마우스를 가져다대면
이처럼 계속 떨리는 현상이 발생되는데..
1) hover 이벤트로 인해 이벤트 대상이 위로 올라가면서
2) 경계선 부분에 위치한 마우스가 벗어나게 되고
3) hover 이벤트가 풀리면서 제자리로 돌아오게 되고
4) 다시 hover 이벤트가 발생되면서
5) 무한 루프를 돌고 있는 것 같은데..
위와 같은 이슈를 해결할 수 있는 방안이나 팁이 있을까요 ?
답변 1
보통 이런 경우는 pointer-events 를 none 으로 해결합니다.
hover 가 되면 pointer-events 를 none 으로 만들어두면 풀리는게 수동이 되기는 하는데...
님의 경우는 정확한 소스를 보지 않고는 정확한 답변을 드리기가 애매하네요
답변을 작성하시기 전에 로그인 해주세요.