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

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;
}

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

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

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).

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

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.

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

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

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 

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 !

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