:hover

  • Revision slug: CSS/:hover
  • Revision title: :hover
  • Revision id: 347141
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment Minimal typo correction

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. This style may be overridden by any other link-related pseudo-classes, that is {{ cssxref(":link") }}, {{ cssxref(":visited") }}, and {{ cssxref(":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.

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; }

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 see our complete CSS-based dropdown menu example for a possible cue.

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.

Note: For an analogous effect, but based on the :checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the En/CSS/:checked page.

Specifications

Specification Status Comment
{{ SpecName('CSS4 Selectors', '#hover', ':hover') }} {{ Spec2('CSS4 Selectors') }} No significant change.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }} {{ Spec2('CSS3 Selectors') }} No significant change.
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }} {{ Spec2('CSS2.1') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
for <a> elements 0.2 {{ CompatGeckoDesktop(1.0) }} 4.0 4.0 2.0.4 (419)
various bugs before
for all elements 0.2 {{ CompatGeckoDesktop(1.0) }} 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>
<h2 id="Summary">Summary</h2>
<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. This style may be overridden by any other link-related pseudo-classes, that is {{ cssxref(":link") }}, {{ cssxref(":visited") }}, and {{ cssxref(":active") }}, appearing in subsequent rules. In order to style appropriately links, you need to put the <code>:hover</code> rule after the <code>:link</code> and <code>:visited</code> rules but before the <code>:active</code> one, as defined by the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</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>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
:link:hover { outline: dotted red; }

.foo:hover { background: gold; }
</pre>
<h3 id="Dropdown_menu">Dropdown menu</h3>
<p>With the <code>:hover</code> pseudo-class you can create complex cascade algorithms. This is a common technique used, for example, in order to create <strong>pure-CSS dropdown menus</strong> (that is only CSS, without using <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). The essence of this technique is the creation of a rule like the following:</p>
<pre class="brush: css">
div.menu-bar ul ul {
&nbsp; display: none;
}

div.menu-bar li:hover &gt; ul {
&nbsp; display: block;
}
</pre>
<p>to be applied to an HTML structure like the following:</p>
<pre class="brush: html">
&lt;div class="menu-bar"&gt;
&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp; &lt;li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="example.html"&gt;Menu&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="example.html"&gt;Link&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp; &lt;/li&gt;
&nbsp; &lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>See see our complete <a class="internal" href="/@api/deki/files/6238/=css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> for a possible cue.</p>
<h3 id="Gallery_with_full-size_images_and_previews">Gallery with full-size images and previews</h3>
<p>You can use the <code>:hover</code> pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews. See <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">this demo</a> for a possible cue.</p>
<div class="note">
  <strong>Note:</strong> For an analogous effect, but based on the <a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked"><code>:checked</code></a> pseudo-class (applied to hidden radioboxes), see <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">this demo</a>, taken from the <a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked">En/CSS/:checked</a> page.</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>No significant change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
      <td>{{ Spec2('CSS3 Selectors') }}</td>
      <td>No significant change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<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.0) }}</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.0) }}</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>
<p>&nbsp;</p>
Revert to this revision