28172 sujets

CSS et mise en forme, CSS3

[Résolu] Faire apparaitre un commentaire sur un bloc

Bonjour,
suite à mon post précédent, nouveau "défi" pour le débutant que je suis:
faire apparaitre un commentaire au passage de la souris sur un bloc
Il me semblait que ceci devrait fonctionner mais non...

<html>
<head>
<style>
#bloc1{
width:90%;
height:20%;
margin-left:auto;
margin-right:auto;
text-align:center;
border:solid 1px red;
overflow:hidden;
} 

 
.commentaire{
-moz-transition-property:top;
-moz-transition-duration:1s;
position:relative;
width:20%;
height:20%;
top:90%;
background-color:yellow;
margin-left:auto;
margin-right:auto;
} 

#bloc1:hover+.commentaire{top:80%;}

</style>
</head>

<body>

<div id='bloc1'>
<div class="commentaire"></div>
</div>
  
</body>
</html>


Il me semble que le bloc "commentaire" devrait apparaitre progressivement au bas du bloc "bloc1" au passage de la souris sur le bloc1. Où me trompé-je ?

Merci d'avance pour votre aide
Philippe
Modifié par filtep (10 Nov 2013 - 01:26)
J'ai trouvé, il faut remplacer

#bloc1:hover+.commentaire{top:80%;}
par
#bloc1:hover>.commentaire{top:80%;}

Désolé d'avoir encombré la forum, je lirai plus avant de poster désormais...
Je laisse le sujet, ça peut toujours servir à quelqu'un...

Bonne nuit
Sujet clos
Aller à