Modifier une div 1 au survol d'une div 2
pandageek
Messages postés
359
Date d'inscription
Statut
Membre
Dernière intervention
-
Profil bloqué -
Profil bloqué -
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 :
Ce code ne fonctionne pas...
J'imagine que le "carre1" ne peut pas modifier le "carre2"
Comment contourner ce problème?
Merci à vous :)
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 :)
A voir également:
- Modifier une div 1 au survol d'une div 2
- Modifier dns - Guide
- Modifier une story facebook - Guide
- Modifier une liste déroulante excel - Guide
- Supercopier 2 - Télécharger - Gestion de fichiers
- Modifier extension fichier - Guide
14 réponses
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).
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).
Merci beaucoup!
:)
Juste une autre question : Y a t il un moyen de faire deux animations simultanément?
:)
Juste une autre question : Y a t il un moyen de faire deux animations simultanément?
Oui
[edit] truc:hover truc2,truc:hover truc3{lanim}
Varaldi Q.
Laisse moi 2 minutes que j'te trouve un autre truc...
[edit] truc:hover truc2,truc:hover truc3{lanim}
Varaldi Q.
Laisse moi 2 minutes que j'te trouve un autre truc...
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.
je cherche à animer deux objets différents avec deux animations différentes.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Une autre question,
Comment puis-je m'arranger pour que l'animation revienne à sa position initiale en suivant l'animation en sens inverse?
Comment puis-je m'arranger pour que l'animation revienne à sa position initiale en suivant l'animation en sens inverse?
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.
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
Le code HTML :
Le code CSS :
<div id="nuagesTxt">
<div class="new">
<a href="">Nouveau</a>
</div>
</div>
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;
}