Discussion :

[Levendivin]

Bonjour,

Je voulais créer les boutons qui switchent dans une même image en utilisant les "sprites CSS", ça pose un problème chez moi, c'est-à-dire que j'ai préparé une image 360 x 120 px (en sachant que 60px pour chacune à afficher), il y a 6 images sur une ligne, donc 12 sur les lignes pour les switcher avec les %, je n'ai toujours que la première image qui se montre !!! pour le survol, c'est bon, mais c'est la première image qui ne se décale pas ! Comment ça se fait ?
voici le code html:

Code html :

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

1
2
3
4
5
6
7
8
<ul class="icone">
					<li class="icone1"></li>
					<li class="icone2"></li>
					<li class="icone3"></li>
					<li class="icone4"></li>
					<li class="icone5"></li>
					<li class="icone6"></li>
		   </ul>

et le 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
.icone li {width: 60px; height: 60px; display: inline-block; background: url("sprite.png") no-repeat;}
 
	.icone1 {background-position: left top;}
	.icone1:hover {background-position: left bottom;}
	.icone2 {background-position: 20% top;}
	.icone2:hover {background-position: 20% bottom;}
	.icone3 {background-position: 40% top;}
	.icone3:hover {background-position: 40% bottom;}
	.icone4 {background-position: 60% top;}
	.icone4:hover {background-position: 60% bottom;}
	.icone5 {background-position: 80% top;}
	.icone5:hover {background-position: 80% bottom;}
	.icone6 {background-position: right top;}
	.icone6:hover {background-position: right bottom;}

[Invité]

Bonjour,

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.icone li {width: 60px; height: 60px; display: inline-block; background: url("sprite.png") no-repeat; }
 
	.icone .icone1 {background-position: left top;}
	.icone .icone2 {background-position: 20% top;}
	.icone .icone3 {background-position: 40% top;}
	.icone .icone4 {background-position: 60% top;}
	.icone .icone5 {background-position: 80% top;}
	.icone .icone6 {background-position: right top;}
 
	.icone1:hover {background-position: left bottom;}
	.icone2:hover {background-position: 20% bottom;}
	.icone3:hover {background-position: 40% bottom;}
	.icone4:hover {background-position: 60% bottom;}
	.icone5:hover {background-position: 80% bottom;}
	.icone6:hover {background-position: right bottom;}

ou :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.icone li {width: 60px; height: 60px; display: inline-block; }
 
	.icone1 {background: url("sprite.png") left top no-repeat;}
	.icone2 {background: url("sprite.png") 20% top no-repeat;}
	.icone3 {background: url("sprite.png") 40% top no-repeat;}
	.icone4 {background: url("sprite.png") 60% top no-repeat;}
	.icone5 {background: url("sprite.png") 80% top no-repeat;}
	.icone6 {background: url("sprite.png") right top no-repeat;}
 
	.icone1:hover {background-position: left bottom;}
	.icone2:hover {background-position: 20% bottom;}
	.icone3:hover {background-position: 40% bottom;}
	.icone4:hover {background-position: 60% bottom;}
	.icone5:hover {background-position: 80% bottom;}
	.icone6:hover {background-position: right bottom;}

[Candygirl]

Hello,

Tu rencontres un problème de spécificité des sélecteurs. Ton ".icone li" est plus spécifique que ".icone2" (classe+élément contre juste classe) du coup il a priorité.

Par contre, pour tes hover, classe + pseudo-class est plus spécifique que classe+élément et donc tu as bien ton effet.

Il te suffit donc d'augmenter la spécificité de ton sélecteur par exemple en spécifiant l'élément: "li.icone2"
ce qui lui donnera la même spécificité que ".icone li" mais il prendra alors le dessus puisque placé après.

[Levendivin]

Hello,

Ca marche très bien, merci.
Et merci aussi pour éclaircir le problème de spécificité des sélecteurs, je n'aurais pas pensé à cela.

Résolu.