Comment faire un effet de survol sur un hover

**jadey** · 07/09/2009, 00h03

Hello les gens;
Est t il possible d'encapsuler le comportement suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<span onmouseover="this.style.color='orange';"
onmouseout="this.style.color='white';">Hello</span>

dans un style css ?
Merci pour toute vos contributions.

**12monkeys** · 07/09/2009, 00h14

Bonsoir

Oui en utilisant la pseudo-classe :hover

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
span:hover {
        background-color : orange;
}

Ce code ne fonctionnera cependant pas avec internet explorer 6 qui interprete le :hover que sur les liens (<a href="...">)

**jadey** · 07/09/2009, 00h26

Bonsoir et merci d'avoir répondu aussi vite.
Je ne comprend pas mais ça ne marche pas chez moi. J'ai IE 7.

**12monkeys** · 07/09/2009, 17h47

Peut on voir le code comment que tu as fait ?

Un exemple fonctionnel avec IE7 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titre</title>
<style type="text/css">
span:hover {
        background-color : orange;
}
</style>
</head>
 
<body>
 
  <p>
Du texte sur lequel <span>se trouve un hover</span>.
  </p>
 
</body>
</html>

Comment faire un effet de survol sur un hover

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager