:hover

  • Revision slug: CSS/:hover
  • Revision title: :hover
  • Revision id: 573
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 82 words added, 1 words removed

Revision Content

{{ CSSRef() }}

Summary

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

Visual user agents like Firefox apply this pseudo-class when the cursor (mouse pointer) hovers over an element.

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 pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it.</p>
<p>Visual user agents like Firefox apply this pseudo-class when the cursor (mouse pointer) hovers over an element.</p>
<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> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos" target="_blank" title="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">CSS 3 Selectors #useraction-pseudos</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>
<p> </p>
Revert to this revision