Bonjour à tous, ça fait quand même un petit bout de temps que je fais du css, mais je tombe toujours à chaque projet sur des soucis mystérieux, qui tendent à me faire penser que je ne maîtriserai jamais à 100% cette techno !

Bref, mon pb:

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

.node{
	width:170px;
	text-align:center;
	margin-top:15px;
	height:90%;
	border-radius: 20px;
}
#node_1{
	margin-left:30px;
}
.node li{
	cursor:pointer;
	font-size:20px;
	margin-bottom:10px;
	width:98%;
	list-style:none;
	border-radius: 20px;
	height:30px;
	border:solid 2px black;
        background:url(img/pattern/22.jpg)
}

.node li:hover{
	background:blue;
	color:white;
	border:solid 2px black;
}

.selected{
	background:green;
	color:white;
        border:solid 2px red;

}
HTML:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
<div id="node_1" class="node">
			<li onclick="addBox(this,1);" class="selected">toto</li>
			<li onclick="addBox(this,1);">tata</li>
			<li onclick="addBox(this,1);">titi</li>
			<li onclick="addBox(this,1);">tutu</li>
		</div>


Le hover marche très bien, si je met simplement un border à mon .selected, ça ne marche pas, et si je met un background (image ou couleur) à mon li, mon .selected ne le change pas. Pour les autres lignes tout marche...

POURQUOI ??