Hover sur un lien

2 pièce(s) jointe(s)

Hover sur un lien

Bonjour,

J'ai fais un système solaire en css, mais je bloque sur le hover (qui ne se prend pas en compte ) pour par exemple agrandir la planète ou mettre la rotation sur pause. J'ai essayé #mercure:hover ...

Merci pour votre aide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="conteneur">
<!--Début header-->
	<header id="haut"></header>
<!--Fin header-->
<!--Début contenu-->
	<section id="contenu">
		<article>
			<div id="systeme">
				<a href="" id="soleil"></a>
				<div id="elipseMercure">
					<a id="mercure"></a>
				</div>
			</div>
		</article>
	</section>
<!--Fin contenu-->
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#soleil             { position:absolute; -webkit-border-radius: 390px; top:273px; left:453px; width:70px; height:70px; background-image:radial-gradient(red, yellow); -webkit-animation: tour 15s infinite linear;}
/*Pour faire les elipses je me suis servi d'un carré (qui tourne) 'centré' sur le soleil, ensuite j'ajoute la planète en haut à gauche. */
#elipseMercure{ 
   position:absolute; 
   top:260px; 
   left:440px; 
   width:100px; 
   height:100px;  
  -webkit-animation: tour 7.5s infinite linear; 
}
#mercure{ 
  position:absolute; 
  -webkit-border-radius: 390px; 
  width:10px; 
  height:11px; 
  background-image:linear-gradient(#333333,black); 
  -webkit-animation: tour 7s infinite linear;
}
/*Les animations*/
@-webkit-keyframes tour{
	from{-webkit-transform: rotate(360deg);}
	to{-webkit-transform: rotate(0deg);}
}

Pièce jointe 161215
Pièce jointe 161216

Bonjour,
pas regardé de près mais il te va falloir être précis pour faire un :hover sur ton mercure, :D, trêve de plaisanterie, n'y aurait-il pas un problème de z-index.

salut,

Étant donné que la balise <a> a une id = mercure, le sélecteur #mercure:hover ne suffit pas ? j'ai essayé avec un z-index sur l’ellipse ensuite sur mercure, sans grand résultats.