:hover

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

/* Selects any <a> element when "hovered" */
a:hover {
  color: orange;
}

Styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity. To style links appropriately, put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

Note: The :hover pseudo-class is problematic on touchscreens. Depending on the browser, the :hover pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.

Syntax

:hover

Examples

Basic example

HTML

<a href="#">Try hovering over this link.</a>

CSS

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

a:hover {
  background-color: gold;
}

Result

You can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail. See this demo for a possible cue.

Note: For an analogous effect, but based on the :checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the :checked reference page.

Specifications

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.  

Browser compatibility

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 ?
<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 ?
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 ?
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 ?

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.

See also

Last modified:

, by MDN contributors
Related Topics
  1. CSS
  2. CSS Reference
  3. CSS Selectors
  4. Guides
    1. Using the :target pseudo-class in selectors
  5. Basic Selectors
    1. Type selectors
    2. Class selectors
    3. ID selectors
    4. Universal selectors
    5. Attribute selectors
  6. Combinators
    1. Adjacent sibling combinator
    2. General sibling combinator
    3. Child combinator
    4. Descendant combinator
    5. Column combinator
  7. Pseudo-classes
    1. :active
    2. :any-link
    3. :checked
    4. :blank
    5. :default
    6. :defined
    7. :dir()
    8. :disabled
    9. :empty
    10. :enabled
    11. :first
    12. :first-child
    13. :first-of-type
    14. :fullscreen
    15. :focus
    16. :focus-visible
    17. :focus-within
    18. :has()
    19. :host()
    20. :host-context()
    21. :hover
    22. :indeterminate
    23. :in-range
    24. :invalid
    25. :is() (:matches(), :any())
    26. :lang()
    27. :last-child
    28. :last-of-type
    29. :left
    30. :link
    31. :not()
    32. :nth-child()
    33. :nth-last-child()
    34. :nth-last-of-type()
    35. :nth-of-type()
    36. :only-child
    37. :only-of-type
    38. :optional
    39. :out-of-range
    40. :placeholder-shown
    41. :read-only
    42. :read-write
    43. :required
    44. :right
    45. :root
    46. :scope
    47. :target
    48. :valid
    49. :visited
    50. :where()
  8. Pseudo-elements
    1. ::-moz-progress-bar
    2. ::-moz-range-progress
    3. ::-moz-range-thumb
    4. ::-moz-range-track
    5. ::-ms-browse
    6. ::-ms-check
    7. ::-ms-clear
    8. ::-ms-expand
    9. ::-ms-fill
    10. ::-ms-fill-lower
    11. ::-ms-fill-upper
    12. ::-ms-reveal
    13. ::-ms-thumb
    14. ::-ms-ticks-after
    15. ::-ms-ticks-before
    16. ::-ms-tooltip
    17. ::-ms-track
    18. ::-ms-value
    19. ::-webkit-progress-bar
    20. ::-webkit-progress-value
    21. ::-webkit-slider-runnable-track
    22. ::-webkit-slider-thumb
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue
    27. ::first-letter (:first-letter)
    28. ::first-line (:first-line)
    29. ::grammar-error
    30. ::marker
    31. ::part()
    32. ::placeholder
    33. ::selection
    34. ::slotted()
    35. ::spelling-error