Partage

Apparition d'une div au survol d'une autre div

Problème d'apparition de div au survol d'une image

Sujet résolu
22 juillet 2014 à 6:20:57

Bonjour / bonsoir à tous le monde. Tout d'abord je m'excuse si le sujet à déjà était abordé dans un autre sujet (seulement après plus de deux heures et demi de recherche mes nerfs ont lâchés...).

J'ai bien trouvé des codes qui trainais ici et là, mais je n'ai pas su l'intégrer à mon code pour que celui-ci fonctionne.

Bon voilà mon problème: J'essaie de faire apparaître une div au survol d'une image.

Pour que ce soit plus compréhensible voici un exemple de code html:

<!-- Je veux que au survol de l'image qui suit, la div contenant le marqueur (class="invisible") apparaisse -->
<img src="nomDeLimage.jpg" alt="image" style="width:140px; height:140px;" class="survol"/>


<!--Je veux faire apparaitre cette div-->
<div class="invisible">
Hoo, une belle image !
</div>

Le problème qui se pose, c'est que la div que je veux faire apparaitre n'est (comme vous le savez) pas contenu dans la balise <img/>, du coup impossible d'utiliser la combinaison css suivante:

.invisible{
display:none;
}

.survol:hover .invisible
{
display:block;
}

La question qui en résulte est la suivante: Est-t'il possible en css, et si oui comment (seulement du css si possible) de faire apparaitre une div au survol d'une autre div /image /lien, sachant que la div n'est pas enfant de la balise <img/>...

Genre en insérant entre .survol:hover et .invisible un "signe" qui me permette d'agir seulement sur .invisible même si il n'est pas enfant de .survol...

Merci à l'avance pour votre aide; c'est mon tout premier message sur ce forum, j'espère que j'attirerai votre attention avec ma question follement délirante ^^. See ya 

-
Edité par Miyujach 22 juillet 2014 à 6:22:06

Le con a toujours raison. Question de surnombre.
22 juillet 2014 à 9:03:55

il faut mettre le nom de ton image dans le css aussi
Upi
22 juillet 2014 à 10:33:56

Bonjour,

Aucun besoin du nom de l'image ; Miyujach, il te manque un tout petit caractère pour que ton CSS  fonctionne: 

Le combinateur d'adjacence indirecte: ~

Voir ici en bas du tableau: http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors

Ton code devient donc:

.invisible{
display:none;
}
 
.survol:hover ~ .invisible
{
display:block;
}



"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
22 juillet 2014 à 11:01:55

Même ceci fonctionnera si la div est bien toujours après l'image :

.survol:hover+.invisible {
   display:block;
}



Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
22 juillet 2014 à 11:15:20

Oui, mais plus précisément, à condition avec le  + que la div soit juste après (adjacence directe)

alors que c'est  toujours nécessairement après, mais n'importe où après avec le ~ (adjacence indirecte).

"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
22 juillet 2014 à 12:00:28

Miyujach a écrit:

Merci pour vos réponse si rapide ^^. Mais, (oui il y en a toujours un) je les avaient essayés hier soir les (combinateurs adjacents direct et indirect) mais ça n'avait pas fonctionné...

Du coup j'ai quand même re-essayé ce matin, mais toujours pareil ça ne fonctionne pas, voici le code pour preuve ainsi qu'une image:

CSS:

.survolImg:hover + .info /*J'ai également essayé avec le ~ mais j'ai le même résultat...*/
 {
    display: block;
}
.info
{
    display: none;
}



HTML:

<div class="image-upload" >

   <label for="file-input" style="height:200px; padding-top:30px;">
                                                    
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRbezqZpEuwGSvitKy3wrwnth5kysKdRqBW54cAszm_wiutku3R" name="aboutme" width="140" height="140" border="0" class="img-circle survolImg survolContour gps_ring" />
   
   </label>
   <div class="info">salut toi</div>                                                

   <input id="file-input" type="file"/>
</div>

Et voici une image du résultat:

http://hpics.li/2094d64

Edit: ce qui se situe dans la zone entouré de bleu est l'emplacement ou devrait apparaitre le texte de la div au survol de l'image.

Merci pour vos réponse qui me sont précieuse :).

-
Edité par Miyujach il y a moins de 5s



-
Edité par Miyujach 22 juillet 2014 à 12:10:19

Le con a toujours raison. Question de surnombre.
22 juillet 2014 à 12:10:31

Cela ne peut pas fonctionner ici car tu as englobé ton img dans un autre élément (<label>), ce qui fait qu'elle n'est plus au même niveau que la div.info.

Il faudrait que le hover 'remonte à l'étage' pour atteindre ensuite cette div, hors c'est impossible : le css suit toujours le flux qui ne peut que descendre comme le courant d'une rivière.

Dans ce genre de configuration, seul un langage dynamique comme le JavaScript peut faire ce genre de chose.

"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
22 juillet 2014 à 12:14:02

Effectivement si tu ne nous donnes pas le bon code... ^^

Pourquoi ne pas faire tout simplement le :hover sur le label...

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
22 juillet 2014 à 12:20:52

Merci mille fois à vous tous pour vos réponse ! CA FONCTIONNE !!

Voici le code final (ça m'énerve quand les personnes ne le montre pas quand il fonctionne, donc je vais tacher de ne pas faire pareil :D

HTML: J'ai donc placé mon image au même niveau sémantique comme l'as dit philiga 

<div class="image-upload salut" >
   <label for="file-input" style="height:200px; padding-top:30px;">
                                                    
       <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRbezqZpEuwGSvitKy3wrwnth5kysKdRqBW54cAszm_wiutku3R" name="aboutme" width="140" height="140" border="0" class="img-circle survolImg survolContour gps_ring" />
       <div class="info">salut toi</div> 
                                                    
   </label>
                                                                                               
   <input id="file-input" type="file"/>
</div>

CSS: et mis un combinateur d'adjacence indirect

.survolImg:hover ~ .info
{
    display: block;
}
.info
{
    display: none;
}

Et le résultat et bien celui que j'attendais, j'ai encore quelques modification d'ordre esthétique à faire, mais l'essentiel et là. Merci à tous pour votre aide !

Le con a toujours raison. Question de surnombre.
22 juillet 2014 à 12:22:10

Très bonne reflexion ronamazona, je pense que je vais faire comme ça :)
Le con a toujours raison. Question de surnombre.
22 juillet 2014 à 12:29:18

Petit correctif: la notion de niveau ici est de nature structurale et fonctionnelle et non sémantique...
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
21 avril 2017 à 1:02:16

j'apprécie vos réponse cela m'a aider à trouver une solution mais j'ai une autre question, est-ce possible après avoir fait apparaitre la deuxième div en hover ;;; de garder fixe cette div et de faire un clic sur cette div apparu en hover car la mienne apparait mais dès que j'écrate la souris de la première div l'hover disparait directement voici le code:

votre aide s.v.p 

.utilisateur1{

display:inline-block;

 background-color:white;

 width:112px;

 height:100px;

 position:absolute;

 top:73px;

 Right:1px;

opacity:0;

}

.utilisateur

{

 background-color:#FFB6C1;

 width:112px;

 height:50px;

 position:absolute;

 top:16px;

 Right:1px;

  border-radius: 7px 7px 7px 7px;

 /* text-shadow:0 -5px 0 black; */

}

.utilisateur:hover ~ .utilisateur1 {

 background-color:#48D1CC;

cursor:pointer;

opacity:1;

transition:1s;

border-radius: 5px 5px 5px 5px;

}

-
Edité par vanndambu1 21 avril 2017 à 3:31:44

Apparition d'une div au survol d'une autre div

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown