28172 sujets

CSS et mise en forme, CSS3

Menu caché

Salut,

J'ai crée un menu caché sur la gauche (seulement 50px dépassent) qui apparait seulement au survol de la souris.
J'aimerais aussi qu'il apparaisse lorsque je survol une image précise. Après plusieurs recherches, je pense que tout est dans la syntaxe, malheureusement j'ai rien trouvé.

Pour résumer : Lorsque survol image, menu change de position.


.menuup {
	left:-200px;
}

.menuup:hover {
	left:0px;
}

.firstpicture:hover ??? .menuup{
	left:0px;
	
}
cela peut fonctionner si :
firstpicture:hover .menuup {/*.menuup enfant de .firstpicture*/ }
firstpicture:hover  > .menuup {/*.menuup enfant direct de .firstpicture*/ }
firstpicture:hover  + .menuup {/*.menuup frere juste après  .firstpicture*/ }
firstpicture:hover  ~ .menuup {/*.menuup frere(s)  derrière .firstpicture*/ }
...


En gros, .firstpicture doit etre en amont, frere ou parent de .menuup dans ton document HTML (le selecteur peut-être complexifier selon l'imbrication) ... a quoi donc ressemble ta structure HTML ?
Modifié par gc-nomade (09 Jan 2014 - 18:23)
Je comprend pas trop cette histoire de parenté.

Basiquement j'ai :

<body>

<div class="menuup">
</div>

<div class="gallery">
<img class="firstpicture"  />
</div>

<body>
Comme ton image est aprés ton menu, il n'y a pour le moment aucun selecteur qui te permettront de remonter dans l'arborescence de ta structure html. Tu devras en passer par javascript.

.gallery est parent de .firstipicture.
.menuup est frère de .gallery et est placé en amont/devant .gallery
Par exemple , ceci est possible 
.menuup:hover + gallery {/* style applicable */}
.menuup:hover + gallery .firstpicture {/* style applicable */}

html est le parent racine
body enfant de html est le parent des éléments affichable de ton document
etc ...

un groupe de selecteur css se lit de droite à gauche en testant un a un les sélecteurs comme une condition.
.menuup:hover + gallery .firstpicture se lit/teste comme ceci :
si je trouve .firstpicture alors je verifie si .firstpicture est enfant de .gallery
si la condition est encore bonne, je verifie si .gallery est frere et juste derrière .menuup
enfin si toutes les conditions sont bonnes, j'applique le style a .firstpicture
Modifié par gc-nomade (09 Jan 2014 - 18:58)
Dommage, merci pour toutes ces explications en tout cas, c'est plus clair.
Sinon, es ce que tu pense que c'est possible de laisser afficher le menu quelques secondes à l'ouverture de la page, avant qu'il se rentre automatiquement sur la gauche ?
oui, avec javascript tu peut metre en place une transition(ou animation) CSS en ajoutant une class a .menuup sur l'evenement onload , enfin ce serait ma démarche.

++
Modifié par gc-nomade (09 Jan 2014 - 19:51)
Sujet clos
Aller à