Classes multiples combinées sous IE8

**FrankOVD** · 21/03/2011, 17h51

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, 22h25

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, 13h08

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.

Classes multiples combinées sous IE8

CSS

Vue hybride

Discussions similaires

Partager

Partager