Hover는 ‘하늘에 뜨다.’ 라는 의미의 영단어입니다. UX에서는 ‘무언가의 위에 떠 있다.’라는 의미로 확장됩니다. 그렇다면 우리는 이 단어의 심상을 표현하기 위해 2개의 물건이 필요합니다. 아래에 놓여진 것이 있어야 하고, 그 위에 떠 있는 무언가가 있어야 합니다.
탑-다운 뷰 문서를 읽으시면 마우스 커서가 링크의 위에 있다. 라는 말이 이해되실 겁니다. 그러면 마우스를 움직여 마우스 커서로 링크를 가리켰을 때, 마우스 커서가 링크 위에 호버하고 있다. 라고 말할 수 있겠죠. 이 때 링크의 텍스트 색상이 변하거나 밑줄이 그어지는 인터랙션을 보신 적이 있을 겁니다. 이렇게 마우스로 클릭하기 직전에 어떤 UI 요소를 마우스 커서로 가리키는 있는 상태를 호버 이벤트라고 합니다.
호버 이벤트는 다음과 같은 목적으로 사용할 수 있습니다.
호버 이벤트를 사용해 링크에 밑줄을 긋고, 새로운 ‣을 띄워 자세한 정보를 보여주는 예.
호버 이벤트를 사용해 링크에 밑줄을 긋고, 새로운 ‣을 띄워 자세한 정보를 보여주는 예.
호버 이벤트는 스타일러스 펜으로도 사용할 수 있습니다. 애플 펜슬과 갤럭시 노트 등의 제품군에 사용하는 S펜 역시, 연결된 기기의 화면에 근접하면 호버 이벤트가 작동합니다.
가리키기와는 뉘앙스가 조금 다릅니다. 가리키기와 호버를 기술적으로 분리하긴 어렵습니다만, 가리키기는 어떠한 시각 요소를 포인터로 가리킨다는 ‘행위’로서의 성격이 강하고, 호버는 그걸 가리키고 있는 ‘상태’로서의 성격이 강합니다.