Classes multiples combinées sous IE8

FrankOVD · 21/03/2011, 16h51

Bonjour,

J'ai une liste d'items où chaque ligne est assoclés à la classe ligne et où certaines lignes sont sélectionnées (classes ligne choisi). Finalement, j'ai un rollover sur chaque ligne qui attribue la classe survol en plus des autres.

Comme les items sélectionnés sont de couleur plus foncée que les autres, j'aimerais que les éléments choisis apparaîssent plus foncés même survolés. Alors j'ai bâti mon CSS ainsi :

Code :

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

1
2
3
4
5
 
.ligne { background-color:#FFFFFF; }
.choisi { background-color:#EEEEEE; }
.survol { background-color:#EEEEEE; }
.choisi.survol { nackground-color:#DDDDDD; }

Malheureusement, la couleur de survol est toujours égale à la dernière définie (#DDDDDD), comme si j'avais écrit .survol plutôt que .choisi.survol. Est-ce impossible d'affecter un style spécial à un élément qui combine certaines classes spécifiques?

Merci,

Nesmontou · 21/03/2011, 21h25

Bonsoir,

Il y a une erreur d'écriture

Code :

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

.choisi.survol { nackground-color:#DDDDDD; }

au lieu de

Code :

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

.choisi.survol { background-color:#DDDDDD; }

Sinon, pourquoi ne pas utiliser la pseudo-class :hover pour gérer le survol ?

Code :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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">
	<head>
		<title>Test</title>
 
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
 
			body, html {
				height: 100%;
				width: 100%;
			}
 
			li {
				background: #ffffff;
			}
 
			li:hover {
				background: #eeeeee;
			}
 
			li.choisi {
				background: #eeeeee;
			}
 
			li.choisi:hover {
				background: #dddddd;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>Item 1</li>
			<li class="choisi">Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li class="choisi">Item 6</li>
			<li class="choisi">Item 7</li>
			<li>Item 8</li>
			<li>Item 9</li>
			<li>Item 10</li>
		</ul>
	</body>
</html>

Ce code fonctionne sous IE 8

Bon développement

FrankOVD · 22/03/2011, 12h08

Bonne réflexion pour :hover, je n'y avais pas songé. Pour ce qui est de la faute, ça vient de la retranscription.

Merci beaucoup.

22/03/2011, 12h08	#3
FrankOVD Membre actif Inscription : juin 2005 Messages : 407 Détails du profil Informations forums : Inscription : juin 2005 Messages : 407 Points : 182 Points : 182	Bonne réflexion pour :hover, je n'y avais pas songé. Pour ce qui est de la faute, ça vient de la retranscription. Merci beaucoup. __________________ http://www.overdrunk.net Pensez à la balise
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email