:hover

:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.

/* "호버링" 중인 <a> 요소 선택 */
a:hover {
  color: orange;
}

:hover 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :visited, :active)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link:visited:hover:active)를 따라, :hover 규칙을 :link:visited 뒤, :active 앞에 배치하세요.

참고: :hover 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.

구문

:hover

예제

HTML

<a href="#">이 링크를 가리켜보세요.</a>

CSS

a {
  background-color: powderblue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}

결과

명세

Specification Comment Feedback
HTML Living Standard
The definition of ':hover' in that specification.
  WHATWG HTML GitHub issues
Selectors Level 4
The definition of ':hover' in that specification.
Allows :hover to be applied to any pseudo-element. CSS Working Group drafts GitHub issues
Selectors Level 3
The definition of ':hover' in that specification.
   
CSS Level 2 (Revision 1)
The definition of ':hover' in that specification.
Initial definition.  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:hoverChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 4Safari Full support 2WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1
Notes
Full support 1
Notes
Notes As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state. The element will remain in the :hover state until a different element has entered the :hover state.
Samsung Internet Android Full support 1.0
<a> element support
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 4Safari Full support 2WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android Full support 1.0
All elements support
Non-standard
Chrome Full support 1Edge Full support 12
Notes
Full support 12
Notes
Notes In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 5381673.
Firefox Full support 1IE Full support 7
Notes
Full support 7
Notes
Notes In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 926665.
Notes In Internet Explorer 9 (and possibly earlier), if a <table> has a parent with a non-auto width, overflow-x: auto;, the <table> has enough content to horizontally overflow its parent, and there are :hover styles set on elements within the table, then hovering over said elements will cause the <table>'s height to increase. See a live demo that triggers the bug. One workaround for the bug is to set min-height: 0%; (the % unit must be specified, since unitless and px don't work) on the <table>'s parent element.
Opera Full support 7Safari Full support 2WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android Full support 1.0
Pseudo-element supportChrome Full support 1Edge Full support 12Firefox Full support 28IE Full support 11Opera ? Safari Full support 2WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 28Opera Android ? Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

같이 보기