호버링

컴퓨팅에서 호버링은 클릭하지 않고 커서를 링크, 버튼 또는 아이콘과 같은 대화형 요소 위로 이동하는 것을 말합니다. 예를 들어 웹 페이지의 링크 위에 커서를 올리면 클릭할 수 있음을 나타내기 위해 커서가 화살표에서 손 모양으로 바뀌고 링크의 색상도 바뀔 수 있습니다.

웹 개발자는 HTML, CSS 또는 JavaScript를 사용해 호버 효과를 추가할 수 있습니다.

• HTML은 링크나 버튼에 추가할 수 있는 전역 이벤트 특성 onmouseover를 제공합니다.

  <button onmouseover="myFunction()";>Hover over me</button>

• CSS는 포인터가 요소 위에 놓여 있을 때 해당 요소가 어떻게 표시될지 정의하는 의사 클래스 :hover를 제공합니다(예: 색상을 변경하거나 텍스트에 밑줄을 표시하는 방식).
  

  a:hover { color:darkblue; text-decoration: underline; }

• JavaScript는 "EventListener" 메서드를 사용해 함수나 다른 코드를 실행할 수 있는 mouseover 및 mouseout 이벤트를 제공합니다.
  

  myElement.addEventListener("mouseover", function() { ... }

호버링의 개념은 웹사이트를 넘어 확장됩니다. 많은 운영 체제와 데스크톱 애플리케이션은 커서를 아이콘, 버튼 또는 메뉴 위로 올리면 이를 강조 표시합니다. 일부 요소는 그 위에 커서를 1~2초 동안 올려 두면 도구 설명을 표시합니다. 호버링 피드백은 가리킨 후 클릭하기 전에 추가 정보를 제공하여 사용자 인터페이스를 더 직관적으로 만듭니다.

호버링과 터치스크린

호버링에는 커서가 필요하므로, 주로 탭과 제스처를 통해 상호 작용하는 터치스크린에는 일반적으로 적용되지 않습니다. 모바일 기기에서 디자이너는 비슷한 피드백을 제공하기 위해 길게 누르기나 시각적 신호와 같은 대안을 사용하는 경우가 많습니다.