:hover

  • Revision slug: CSS/:hover
  • Revision title: :hover
  • Revision id: 577
  • Created:
  • Creator: Marcoos
  • Is current revision? No
  • Comment better wording for usage note. :hover sometimes matches for a short moment while tapping a link on some devices; 17 words added, 5 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 :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.

Examples

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
for <a> elements 0.2 {{ CompatGeckoDesktop("1") }} 4.0 4.0 2.0.4 (419)
various bugs before
for all elements 0.2 {{ CompatGeckoDesktop("1") }} 7.0 7.0 2.0.4 (419)
various bugs before
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

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 <code>:hover</code> is problematic or impossible. The <code>:hover</code> 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.</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>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>for <code>&lt;a&gt;</code> elements</td> <td>0.2</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>4.0</td> <td>4.0</td> <td>2.0.4 (419)<br> <span style="font-size: small;">various bugs before</span></td> </tr> <tr> <td>for all elements</td> <td>0.2</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>7.0</td> <td>7.0</td> <td>2.0.4 (419)<br> <span style="font-size: small;">various bugs before</span></td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
Revert to this revision