질문사항
프로토타이핑 트리거 중 'while hovering'과 'mouse enter' 차이점 정리
두가지 트러거 사용 시 결과물이 비슷하게 나오는 거 같은데 쓰임의 차이가 있냐고 여쭤본 분이 계셨어요. 사실 아주 쉽고 간단한 내용이지만, 묘하게 다른 두가지 트리거를 잘 활용하시길 바라는 마음을 담아서 정리해보았습니다.
답변
'while hovering'와 'mouse enter'의 지속성 차이 (예제 1 확인)
: 'while hovering'은 트리거 이름 그대로 'hover'가 된 순간만 작동하지만 'mouse enter'는 커서가 진입한 순간부터 쭉 지속됩니다.'while hovering'와 'mouse enter'의 원상복귀 (예제 1 확인)
: 'mouse enter'는 커서가 진입한 순간부터 프로토타핑이 쭉 지속되기 때문에 객체를 원 상태로 돌리기 위해서는 'mouse leave' 트리거를 원상태의 객체로 걸어주어야 합니다.펼쳐지는 메뉴에서 두가지 트리거 비교 (예제 2 확인)
마우스 접근 시 펼쳐지는 메뉴를 두가지 트리거를 모두 사용해서 만들어 보았습니다. 이때 'while hovering'은 호버영역(빨간점선 영역) 밖으로 마우스가 나가면 메뉴가 다시 접히기 때문에 실제서비스에서 펼쳐진 후 버튼을 눌러야 하거나 추가 조작을 해야하는 경우 불편함이 생깁니다. 반면 'mouse enter'는 마우스 진입 후 형태가 유지되기 때문에 펼쳐진 후 무언가 해야할게 있을 때 용이해 보입니다.이렇게 비슷한 듯 두 트러거의 특징이 다르니 적재적소에 잘 배치해서 더 멋진 프로토타이핑 만들어 보아요 :)
