[Résolu] :hover affecte un autre élément (transition)

Bonsoir,

souhaitant faire un menu personnalisé, j'aimerai que quand on passe sur le bouton 1 (le panneau s'ouvre et le bouton1 se déplace légèrement à gauche), le bouton 2 se déplace lui aussi sur la gauche pour qu'il soit visible.

	/** ??????????????? */
	#mright .web1:hover .web2{
	margin-left:-250px;  /* ne fonctionne pas */
	transform: translate(-250px,0) scale(1.25);  /* ne fonctionne pas */
	-webkit-transition: all 0.50s ease-in-out;}]

#mright est la div qui contient les a de class web1 ,web2, web3 pour que le hover fonctionne,
mais quand on passe le curseur sur web1 web2 ne bouge pas, je ne comprend pas.
Pouvez-vous m'aider ?

Voici mon code complet (html+css)

Merci d'avance.
Modifié par n3ver (10 Dec 2014 - 19:35)

Bonjour,

1) tu n'utilise pas a bon escient les class et id .
les class servent a applique un style commun a plusieurs éléments quand les id sont a usage unique (ce sont des ancres sur ta page).

2) les styles s'applique en cascade, il n'y a pas de selecteur te permettant de remonter dans l'architecture HTML de tes documents, mais l'adjacence est possible d'amont en aval du flux du document.

Mise a jour de ton jsfiddle : redistribution des class et id ainsi qu'une regle d'adjacence pour l'effet que tu semble rechercher. Je te laisse comparer les deux fiddle : http://jsfiddle.net/ysm62vbf/1/
Cdt

Merci beaucoup de votre aide rapide.
Je vois maintenant ou était mon erreur, un grand merci !!
Cordialement