28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je ne comprends pas pourquoi j'ai un glissement de sprite qui ne se fait pas sur un de mes boutons lors d'un hover de la souris.

Voici le code css

div#playlist-block ul#playlist li.first-playlistitem a#clear {

top: 40px;
right: 82px;
position: absolute;
overflow: hidden;
text-indent: -9999px;
background: url("jplayer.light.png") -150px 0px no-repeat;

width: 50px;
height: 26px;
}

a#clear:hover {
	background: url("jplayer.light.png") -150px -26px no-repeat;

}


Lorsque la souris passe sur le bouton, l'image ne change pas... j'ai vérifié que ce n'était pas un problème de sprite en échangeant les deux valeurs backround.

Le hover ne semble pas pris en compte (en ajoutant d'autre valeur comme la position ne fait rien de particulier), le bouton fonctionne pourtant...

Merci d'avance si vous pouvez m'aider ^^
Modifié par Goldysama (26 May 2011 - 15:00)
Bonjour,

ton bouton est-il bien en display:block ?
Es-tu sûr qu'il a une taille et que donc, tu peux bien " passer au dessus " ?
J'ai ajouté display:block et ça ne change rien, quant à la taille, sauf erreur de ma part elle semble être déclaré avec width et height non ?

J'ai d'autres boutons sur cette page qui fonctionnent de la même manière et qui n'ont pas ce problème, la seule différence c'est que pour ce bouton là, je n'utilise que le premier élément d'une liste, le reste de la liste s'affichant autrement. Mais cela fonctionne, il n'y a que le hover qui ne fonctionne pas dans le cas présent.
Les "a" sont des éléments de type " inline ", on ne peut leur déclarer une taille qu'en les passant en type " block ". Donc un width et un height, sur un a qui n'est pas de type block ( ou autre type gérant ces propriétés ) est inutile Smiley cligne .

en fait, la taille du sélecteur ( qui est bien longue ^^ ) est peut-être la cause, essaye avec :

div#playlist-block ul#playlist li.first-playlistitem a#clear:hover {
background: url("jplayer.light.png") -150px -26px no-repeat;
}


Sinon une page en ligne c'est possible ?
Effectivement, cela fonctionne en mettant tout les éléments du sélecteur pour le hover. Je penserai à ça si cela se reproduit à l'avenir.

Merci n3k0 pour ton aide ^^