Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 575 of :hover

  • Revision slug: CSS/:hover
  • Revision title: :hover
  • Revision id: 575
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Linkification + usage note about :hover and touchscreen; 73 words added, 6 words removed

Revision Content

{{ CSSRef() }}

Summary

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it.

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

Usage Note : on touch screens there are no hover possible. The :hover pseudo-class never matches. 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.

Examples

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4.0  (only for <a>)
7.0
Firefox (Gecko) 1.0 (1.0)
Opera 4.0  (only for <a>)
7.0
Safari (WebKit) 2.0.4 (419)
various bugs before

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> :hover </code>CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> matches when the user designates an element with a pointing device, but does not necessarily activate it.</p>
<p>Visual user agents, like Firefox, Internet Explorer, Safari, Opera or Chrome, apply the associated style when the cursor (mouse pointer) hovers over an element.</p>
<div class="note"><strong>Usage Note</strong> : on touch screens there are no hover possible. The <code>:hover</code> pseudo-class never matches. 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.</div><h3>Examples</h3>
<pre>:link:hover { outline: dotted red; }

.foo:hover { background: gold; }</pre>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" title="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">CSS 2.1 Selectors #dynamic-pseudo-classes</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td rowspan="2">Internet Explorer</td> <td>4.0  (only for <code>&lt;a&gt;</code>)</td> </tr> <tr> <td><strong>7.0</strong></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> </tr> <tr> <td rowspan="2">Opera</td> <td>4.0  (only for <code>&lt;a&gt;</code>)</td> </tr> <tr> <td><strong>7.0</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>2.0.4</strong> (419)<br> <span style="font-size: small;">various bugs before</span></td> </tr> </tbody>
</table>
Revert to this revision