Summary

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to 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.

Usage Note: on touch screens :hover is problematic or impossible. Depending on the browser, the :hover pseudo-class might never match, or match only for a short moment after touching an element, or may continue to match even after the user has stopped touching and until the user touches another element. As touchscreen devices are very common, it is important for web developers not to have content be accessible only when hovering over it, as this content is more cumbersome or impossible for users of such devices to access.

Examples

:link:hover { outline: dotted red; }
.foo:hover { background: gold; }

Dropdown menu

With the :hover pseudo-class you can create complex cascade algorithms. This is a common technique used, for example, in order to create pure-CSS dropdown menus (that is only CSS, without using JavaScript). The essence of this technique is the creation of a rule like the following:

In IE8-11, hovering over an element and then scrolling up/down without moving the pointer will leave the element in :hover state until the pointer is moved. See IE bug 926665.

In IE9 (and possibly earlier), if a <table> has a parent with a non-autowidth and overflow-x: auto;, and 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. Here's a live demo that triggers the bug. One workaround for the bug is to set min-height: 0%; on the table's parent element (and the % unit must be specified; 0 and 0px don't work). For more details, see jQuery ticket #10854.

As of Safari Mobile for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state, and the element will remain in the :hover state until a different element has entered the :hover state.