18041 sujets

Questions générales et questions de débutants

CSS Hover et Hidden [RESOLU]

Bonjour,

Je suis bloqué depuis ce matin sur un truc que je pensais être assez basique.
Je souhaite masquer un texte sous une div et ne réveler ce dernier qu'au passage de la souris sur ce div.

Voici mon code :


	<style>
	a.notsecret:hover {visibility:hidden;}
	a.secret:hover {visibility:visible;}
	</style>
	
	<div style="float:left;width:204px;height:160px;">
								
		<a  class=secret >
			<div  style=" height:116px; width:170px;  background:#FFFFFF;   padding: 5px; color:#CCCCCC; text-shadow: white 1px 1px 1px;font-size:14px;">
				Blabla1
			</div>
		</a>
					
					
		<a  class=notsecret  >
			<div style="min-height:194px,width:214px; margin-top:-129px; display:block; background:#fd9501;  border:2px solid #fd9501;"  >
				<br/><br/><br/><br/><br/><br/><br/><br/>
			</div>
		</a>
				
	</div>


Le problème est double :

1 - le texte apparait à travers la div du dessus Smiley confus

2 - si je passe la souris sur le texte, la propriété hover disparaît Smiley decu

Si quelqu'un a une idée...

Merci beaucoup,

J.
Modifié par justberare (17 Feb 2011 - 16:20)
J'ai trouvé ma solution : jquery.

justberare a écrit :
Bonjour,

Je suis bloqué depuis ce matin sur un truc que je pensais être assez basique.
Je souhaite masquer un texte sous une div et ne réveler ce dernier qu'au passage de la souris sur ce div.

Voici mon code :


	&lt;style&gt;
	a.notsecret:hover {visibility:hidden;}
	a.secret:hover {visibility:visible;}
	&lt;/style&gt;
	
	&lt;div style=&quot;float:left;width:204px;height:160px;&quot;&gt;
								
		&lt;a  class=secret &gt;
			&lt;div  style=&quot; height:116px; width:170px;  background:#FFFFFF;   padding: 5px; color:#CCCCCC; text-shadow: white 1px 1px 1px;font-size:14px;&quot;&gt;
				Blabla1
			&lt;/div&gt;
		&lt;/a&gt;
					
					
		&lt;a  class=notsecret  &gt;
			&lt;div style=&quot;min-height:194px,width:214px; margin-top:-129px; display:block; background:#fd9501;  border:2px solid #fd9501;&quot;  &gt;
				&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
			&lt;/div&gt;
		&lt;/a&gt;
				
	&lt;/div&gt;


Le problème est double :

1 - le texte apparait à travers la div du dessus Smiley confus

2 - si je passe la souris sur le texte, la propriété hover disparaît Smiley decu

Si quelqu'un a une idée...

Merci beaucoup,

J.
Sujet clos
Aller à