[résolu] Transformations dans une liste

Bonjour,

J'essaye d'appliquer une transformation aux éléments d'un liste: au survol d'un élément, celui-ci doit se décaler sur le côté. Seulement j'aimerai que seul le texte se décale, et pas la puce (qui est une image en fait mais peu importe) avec.

Si j'applique la transformation à l'élément li, la puce se décale avec le texte. Et si je l'applique aux éléments a de la liste, ça fonctionne seulement avec opera, les autres navigateurs ne font plus rien bouger.

Je suis donc un peu à court d'idée... voici mon code:

<div id="bloc">
	<h3>titre</h3>
	<ul>
	     <li><a href="lien1">texte1</a></li>
	     <li><a href="lien2">texte2</a></li>
	     <li><a href="lien3">texte3</a></li>
	</ul>
</div>

#bloc li a {
	color: black;
	font-size: 11px;
	border: none;
	-webkit-transition:all 0.3s ease-in-out;
	   -moz-transition:all 0.3s ease-in-out;
	     -ms-transition:all 0.3s ease-in-out;
	       -o-transition:all 0.3s ease-in-out;
	           transition:all 0.3s ease-in-out;
}

#bloc li a:hover {
	color: #DAA520;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-transform: translate(8px);
	    -moz-transform: translate(8px);
              -ms-transform: translate(8px);
                -o-transform: translate(8px);
                    transform: translate(8px);
}

Modifié par Antonio (07 Jun 2012 - 14:42)

Hello.

Tout simplement, remplacer ta transformation dans ton :hover par un padding-left.

Au passage, double ton sélecteur :hover par un :focus, ce qui nous donne :

#bloc li a:hover, #bloc li a:focus {
	color: #DAA520;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	padding-left: 8px;
}

Cadeau bonus, ça doit passer sous tous les IE.

Cela marche en effet, mais ça enlève le "charme" de la transition avec le déplacement progressif.

Si c'est pas possible de le faire en gardant le transition, je préfère alors faire bouger la puce avec

#bloc li a:hover, #bloc li a:focus {
	color: #DAA520;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1); 
        position:relative;
	left: 8px;
}

La transition opère bien sur le padding, la preuve en image.

Génial, j'étais allé chercher un peu loin avec une translation alors qu'un padding fait ça très bien !

Merci
Modifié par Antonio (07 Jun 2012 - 14:37)