28173 sujets

CSS et mise en forme, CSS3

Commentaires apparaissant au survol d'un lien.

Bonjour tout le monde

J’ai posé une question il y a deux jours mais à priori elle n'a inspiré personne.
Je la reformule donc pour la rendre peut être plus claire.

C’est à propos de la méthode permettant l'apparition d'un commentaire au survol d'un lien hypertexte.

Selon le tuto d'alsa on a
CSS

.menu a span {     /* définition de la balise <span> inclue dans <a> */
display: none;
}

.menu a:hover span {   /* définition de la balise <span> au survol */
display: block;
position: absolute;
top: 20px;
left: 0;
width: 600px;       
}


HTML

<ul class="menu">
<li><a href="">Menu 1<span>texte1</span></a></li>
<li><a href="">Menu 2<span>texe2</span></a></li>
</ul>


Ors si je change un peu le code de sorte que le style du span soit dans un style séparé:

.menu a span {     /* définition de la balise <span> inclue dans <a> */
display: none;
}

.menu a:hover span {   /* définition de la balise <span> au survol */
display: block;
       
}
.style1{position: absolute;
top: 20px;
left: 0;
width: 600px;
}



HTML

<ul class="menu">
<li><a href="">Menu 1<span class"style1">texte2</span></a></li>
<li><a href="">Menu 2<span class" style2">texe1</span></a></li>
</ul>

la méthode de survole ne marche plus et le commentaire reste tout le temps affiché. Savez vous pourquoi?

L'intérêt de faire selon cette méthode est bien entendu de faire varier la mise en forme du commentaire en fonction du lien que l'on survol. Voir de faire apparaître deux commentaires distincts lors du survol d'un lien.

Est ce que vous comprenez pourquoi ça ne va pas? Auriez vous une idée pour le corriger?
Si je reviens vers vous c'est bien entendu que j'ai beaucoup cherché sans trouver, et que je commence à être un peu bloqué.

Ah et puis je n'ai pas eu du tout de réponse la dernière fois ce qui m'a rendu un peu perplexe donc si vous trouvez que ma question est vraiment mal formulée dites le moi...

En vous remerciant
Salut,

c'est sans doute a cause de la position absolue qui le fait sortir du flux.

Positionne ton span avec ses marges,sinon essaye plutôt une position relative.
Merci à priori c'est une bonne voie
SAUF que lorsque je mets en positionnement relatif, le span disparait bien lorsque je je suis plus en survol mais comme il est dans le flux de mon menu à chaque foi qu'il s'affice il décale tout mon menu...
Bonjour,

Essayes ce code, peut être ça te conviendra ?

		<style type="text/css">	
.menu  a{
text-decoration: none;
position: relative;

}

.menu a span   {
display: none;
} 

.menu a:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}

.menu a:hover  span  {
color: blue;
position: absolute;
left: 50px;
top: 0;
background: orange;
width: 600px;
display:inline;
}

		</style></head>

	<body>

			<ul class="menu">

<li><a href="">Menu 1<span>texte1</span></a></li>

<li><a href="">Menu 2<span>texe2</span></a></li>

</ul>
Sujet clos
Aller à