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.
The :hover pseudo-class can be applied to any pseudo-element.
Visual user agents, like Firefox, Internet Explorer, Safari, Opera or Chrome, apply the associated style when the cursor (mouse pointer) hovers over an element.
: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:
div.menu-bar ul ul {
display: none;
}
div.menu-bar li:hover > ul {
display: block;
}
to be applied to an HTML structure like the following:
<div class="menu-bar"> <ul> <li> <a href="example.html">Menu</a> <ul> <li> <a href="example.html">Link</a> </li> <li> <a class="menu-nav" href="example.html">Submenu</a> <ul> <li> <a class="menu-nav" href="example.html">Submenu</a> <ul> <li><a href="example.html">Link</a></li> <li><a href="example.html">Link</a></li> <li><a href="example.html">Link</a></li> <li><a href="example.html">Link</a></li> </ul> </li> <li><a href="example.html">Link</a></li> </ul> </li> </ul> </li> </ul> </div>
See our complete CSS-based dropdown menu example for a possible cue.
Gallery with full-size images and previews
You can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews. See this demo for a possible cue.
:checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the En/CSS/:checked page.Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of ':hover' in that specification. |
Living Standard | |
| Selectors Level 4 The definition of ':hover' in that specification. |
Working Draft | Can be applied to any pseudo-element. |
| Selectors Level 3 The definition of ':hover' in that specification. |
Recommendation | No significant change. |
| CSS Level 2 (Revision 1) The definition of ':hover' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
for <a> elements |
0.2 | 1.0 (1.7 or earlier) | 4.0 | 4.0 | 2.0.4 (419) various bugs before |
| for all elements | 0.2 | 1.0 (1.7 or earlier) | 7.0 | 7.0 | 2.0.4 (419) various bugs before |
| for pseudo-element | ? | 28 (28) | ? | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
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-auto width 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). There was a bug raised as jQuery ticket #10854, but it has been closed, because it is not considered a jQuery bug.
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.
See also: