Modifier une div 1 au survol d'une div 2 Fermé

Question

Bonjour,
le titre est assez explicite, j'ai deux div, (imaginons deux carrés noirs distincts), et je veux modifier les propriétés de l'une, quand je survole l'autre (qu'au survol d'un carré, l'autre devienne rouge).

j'ai essayé un animation :

@keyframes survol1
{ 
	0%
	{
		.carre2
		{
		        color:#000000;
		}
	}
	100%
	{
		.carre2
		{
		        color:#FF0000;
		}
	}
}

#carre1:hover
{
        animation:survol1 1s linear 1s;
	animation-delay:0s;
	animation-fill-mode:both;
}

Ce code ne fonctionne pas...
J'imagine que le "carre1" ne peut pas modifier le "carre2"
Comment contourner ce problème?

Merci à vous :)

Varaldi Q · Answer

Salut,

en css, ça marche comme avec un lien classique : div1:hover div2{tes actions}. la nuance vient de l'endroit où est positionné ton div1 par rapport au 2 car il emploi des sélecteurs. Tu peux appliquer un style différent au survol de l'élément parent ou frère notamment, mais pas à l'élément cousin/neveu/oncle (en gros).

pandageek · Answer

Merci beaucoup!
:)


Juste une autre question : Y a t il un moyen de faire deux animations simultanément?

Varaldi Q · Answer

Oui  

[edit] truc:hover truc2,truc:hover truc3{lanim}
  
Varaldi Q. 
Laisse moi 2 minutes que j'te trouve un autre truc...

pandageek · Answer

comme ça on applique deux fois la même animation a deux objets
je cherche à animer deux objets différents avec deux animations différentes.

Varaldi Q · Answer

truc:hover truc2{lanim} 
truc:hover truc3{lanim2}

pandageek · Answer

Merci beaucoup pour ton aide!! ;-)

pandageek · Answer

Une autre question,
Comment puis-je m'arranger pour que l'animation revienne à sa position initiale en suivant l'animation en sens inverse?

Varaldi Q · Answer

en spécifiant l'état de ton anim normalement, du style tu écris le width normal, et hover, tu modifies le width. Si tu mets juste hover modifier le width, il ne reviendra pas à sa position normale vu qu'elle n'est pas clairement définie.

pandageek · Answer

je n'ai pas compris

Varaldi Q · Answer

tes paramètres que tu souhaites changer avec le hover, il faut qu'ils aient déjà une valeur et donc déjà définis ailleurs que dans le hover

pandageek · Answer

ils le sont

Varaldi Q · Answer

Fais voir tout ton code html + css alors

pandageek · Answer

Le code HTML :

Nouveau

Le code CSS : @keyframes new {100%{margin:-55 0 0 -9;}} //on définit la position de ".new" .new { width: 75px; height: 75px; position:absolute; margin: -10 0 0 5; } on active l'animation en cas de :hover #nuagesTxt:hover .new { animation:new 0.3s linear; animation-delay:0s; animation-fill-mode:both; }

Varaldi Q · Answer

Je ne sais pas...

http://www.w3schools.com/css3/css3_animations.asp

Modifier une div 1 au survol d'une div 2

14 réponses

Discussions similaires