Classes multiples combinées sous IE8

Version imprimable

21/03/2011, 16h51
FrankOVD

Classes multiples combinées sous IE8
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:

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,

Bonsoir,

Il y a une erreur d'écriture

Code:

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

au lieu de

Code:

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

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

Code:

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 :)

22/03/2011, 12h08
FrankOVD

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.