:hover

  • Raccourci de la révision : CSS/:hover
  • Titre de la révision : :hover
  • ID de la révision : 70391
  • Créé :
  • Créateur : the prisoner
  • Version actuelle ? Non
  • Commentaire 196 words added, 9 words removed

Contenu de la révision

{{ CSSRef() }}

Résumé

La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur passe la souris dessus.

On rencontre principalement cette pseudo-classe avec l'élément HTML {{ HTMLElement("a") }} mais cela fonctionne aussi avec d'autres éléments HTML.

Note : Sur les écrans tactiles, :hover ne pourra jamais être actif car il est impossible de survoler un élément comme avec le pointeur de la souris.

Exemple

a:hover {
background: yellow;
text-decoration: underline
}

/* Lorsque l'utilisateur passe la souris sur le lien, il sera souligné et le fond apparaitra en jaune */

Compatibilité des navigateurs

Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
1.0 1.0 (1.0)
  • 4.0 (seulement pour <a>)
  • 7.0
  • 4.0 (seulement pour <a>)
  • 7.0
2.0.4 (419)
divers bugs avant

Spécifications

{{ languages( { "en": "en/CSS/%3Ahover" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h3 id="Résumé">Résumé</h3>
<p>La pseudo-classe <code>:hover</code> permet de spécifier l'apparence d'un élément au moment où l'utilisateur passe la souris dessus.</p>
<p>On rencontre principalement cette pseudo-classe avec l'élément HTML {{ HTMLElement("a") }} mais cela fonctionne aussi avec d'autres éléments HTML.</p>
<div class="note"><strong>Note :</strong> Sur les écrans tactiles, <code>:hover</code> ne pourra jamais être actif car il est impossible de survoler un élément comme avec le pointeur de la souris.</div>
<h3 id="Exemple">Exemple</h3>
<pre>a:hover {
background: yellow;
text-decoration: underline
}

/* Lorsque l'utilisateur passe la souris sur le lien, il sera souligné et le fond apparaitra en jaune */
</pre>
<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>1.0</td> <td>1.0 (1.0)</td> <td> <ul> <li>4.0 (seulement pour <code>&lt;a&gt;</code>)</li> <li>7.0</li> </ul> </td> <td> <ul> <li>4.0 (seulement pour <code>&lt;a&gt;</code>)</li> <li>7.0</li> </ul> </td> <td>2.0.4 (419)<br> divers bugs avant</td> </tr> </tbody> </table>
</div>
<h3 id="Spécifications">Spécifications</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</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos" title="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">CSS 3 Selectors</a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/%3Ahover" } ) }}</p>
Revenir à cette révision