Activer les animations de la div 2 et div 3 via un hover sur la div 1

Bonjour bonjour !

Peut-être pouvez-vous me renseigner ...

En me basant sur un exemple d'animation sur le site CCS3CREATE, j'ai créé un menu en CSS. Sachant que chaque icône est représentée par 3 images dans 3 div distinctes pour créer un effet de reflet avec ombre. ( Vous me direz que je pourrais utiliser l'effet reflection etc de CSS plutôt que de créer des images, mais pour une raison de compatibilité je préfère faire comme ça, même si le code est plus lourd et que la création de chaque image est pénible ).

Donc, la première image représente l’icône de la section située dans la 1ère div , la 2ème image est le reflet de l’icône située dans la 2ème div et la 3ème image est l'ombre de l’icône située dans la 3ème div. Jusqu'ici tout baigne.

Sur la DIV de l'icone principale, j'ai créé un "effet bounce" lorsqu'on est en :hover.

Lorsqu'on rollover sur cette dernière, l'effet bounce fonctionne, mais les images ombre et reflet qui sont respectivement dans la deuxième et troisième div sont en perpétuel mouvement dicté par leur "effet bounce" respectif.

Ce que je voudrais faire, c'est que l'animation bounce des div ombre et reflet s'active uniquement lorsqu'on est en :hover sur la div principale.

Bref, j'espère m'être fait comprendre. Au cas vous avez une petite idée sur le moyen que je peux utiliser ... Merci merci x)

	
<nav>
      <ul id="dock"> <!-- fond du menu -->
		<a href="#" target="_blank">
		<div class="icon" id="ical"><span>Agenda</span></div>
		</a>
		<div id="icalr"></div>
		<div id="icalo"></div>			
	</ul>
</nav>

div{
position:absolute; 
]}

/* image de fond du menu */
#dock{
margin: 0;
padding: 0;
position:relative;
height:186px;
overflow:hidden;
font-family:Arial,Helvetica,sans-serif;
background:url('images/dock.png');
background-repeat: no-repeat ;
}
#dock div{
position:absolute;
}

/*

Chaque div est dimensionnée et positionnée et reçoit une image en background.

*/

#ical{
	width:64px;
    height:65px;
    top:106px;
    left:259px;
    z-index:5;
    background:url('images/ical.png');
	}

#icalr{
    
	width:60px;
    height:20px;
    top:167px;
    left:263px;
    z-index:5;
    background:url('images/icalr.png');
	
}

#icalo{
   
	width:63px;
    height:28px;
    top:142px;
    left:257px;
    z-index:3;
    background:url('images/icalo.png');

}

/* Bouton 1 : ical = icone agenda ; icalr = reflet de l'icone agenda ; icalo = ombre de l'icone agenda  */
#dock #ical:hover{
width:64px;
height:65px;
top:106px;
left:259px;
z-index:5;
background:url('images/ical.png');
-webkit-animation:bounce 0.7s linear infinite;
-moz-animation:bounce 0.7s linear infinite;

}

#dock #icalr{
width:60px;
height:20px;
top:167px;
left:263px;
z-index:5;
background:url('images/icalr.png');
-webkit-animation:bounce2 0.7s linear infinite;
-moz-animation:bounce2 0.7s linear infinite;
}

#dock #icalo{
width:63px;
height:28px;
top:142px;
left:257px;
z-index:3;
background:url('images/icalo.png');
-webkit-animation:bounce3 0.7s linear infinite;
-moz-animation:bounce3 0.7s linear infinite;
}

/* pour ical */
@-moz-keyframes bounce{
from{top:106px;}
10%{top:99px;}
20%{top:93px;}
30%{top:89px;}
40%{top:87px;}
50%{top:86px;}
60%{top:87px;}
70%{top:89px;}
80%{top:93px;}
90%{top:99px;}
to{top:106px;}
}

/* pour icalr */
@-moz-keyframes bounce2{
from{top:167px;}
10%{top:174px;}
20%{top:180px;}
30%{top:184px;}
40%{top:186px;}
50%{top:187px;}
60%{top:186px;}
70%{top:184px;}
80%{top:180px;}
90%{top:174px;}
to{top:167px;}
}
/* pour icalo */
@-moz-keyframes bounce3{
from{top:142px;}
50%{top:138px;}
to{top:142px;}
}

/* pour ical */
@-webkit-keyframes bounce{
from{top:106px;}
10%{top:99px;}
20%{top:93px;}
30%{top:89px;}
40%{top:87px;}
50%{top:86px;}
60%{top:87px;}
70%{top:89px;}
80%{top:93px;}
90%{top:99px;}
to{top:106px;}
}

/* pour icalr */
@-webkit-keyframes bounce2{
from{top:167px;}
10%{top:174px;}
20%{top:180px;}
30%{top:184px;}
40%{top:186px;}
50%{top:187px;}
60%{top:186px;}
70%{top:184px;}
80%{top:180px;}
90%{top:174px;}
to{top:167px;}
}

/* pour icalo */
@-webkit-keyframes bounce3{
from{top:142px;}
50%{top:138px;}
to{top:142px;}
}

Aperçu de l'effet presque souhaitée ^^ : http://xoverline.free.fr/testcss/page.html

Merci de m'avoir lu
Modifié par luluofmars (06 Sep 2012 - 01:13)

bonsoir,

Aprés une lecture rapide et en diagonale, je dirais:

les 3 div pourrait être imbriqué, mieux, 1 seul div + les pseudo after/before avec du positionement relatif->absolu + z-index.

Sinon , le selecteur adjacent~, enfin , dans un nav , on peut se passer de ul , mais ul ne peut se passer d'un li .

++

Merci beaucoup de m'avoir éclairé ! Je vais regarder dans la direction que tu m'indiques pour essayer de régler le problème.

Quant au <nav> et <ul>, merci pour l'information c'est rectifié. Le <a href> qui englobe le div et le span fonctionne, mais la syntaxe est certainement incorrecte, non ?

Pour le lien qui englobe un <div> , tel quel c'est correct en HTML5 tant que tu n'auras pas d'autre element de type inline, inline-block, texte ou image adjacent a ce lien.

++

http://dev.w3.org/html5/spec/single-page.html#the-a-element