hover property CSS Reference

Definition and Usage

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.

Visual user agents, like Firefox, Internet Explorer, Safari, Opera or Chrome, apply the associated style when the cursor (mouse pointer) hovers over an element.

Note: on touch screens :hover is problematic or impossible. The :hover pseudo-class never matches, or matches for a short moment after touching an element. As touchscreen devices are very common, it is important for web developer not to have content accessible only when hovering over it, as this content would be hidden for users of such devices.


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


Desktop browsers

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

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support NA NA NA NA NA

Relative articles