Css div1:hover div2

Fermé
Signaler
Messages postés
587
Date d'inscription
samedi 7 juin 2008
Statut
Membre
Dernière intervention
4 juin 2011
-
Messages postés
146
Date d'inscription
lundi 29 juin 2009
Statut
Membre
Dernière intervention
23 mai 2012
-
Bonjour,
je voudrai faire aparaitre une div au survol d'une autre div

en voyant mon code vous allez comprendre^^

#div1:hover #div2
{
      display: block;
}



c'est surement tout con mais jai pas trouvé alors après quelques essai
jme suis dit : va voir sur ccm et va te coucher on verra ca demain...
merci a vous de me dépanner^^

par contre des trucs simple svp, jaime pas copier bètement sans comprendre

merci beaucoup

zZzzZZZZZzZZZzzzzzz...

8 réponses

Messages postés
146
Date d'inscription
lundi 29 juin 2009
Statut
Membre
Dernière intervention
23 mai 2012
6
Et ben voila, tout est clair, maintenant, avec le code, c'est une erreur que t'as fait :p


En CSS, si tu marque

#div1:hover #div2
{
      display: block;
}


Cela signifie que le style s'applique sur la div2, qui est inclus dans la div1.

Or, la, tes 2 divs sont separés.

Essaie de faire le test avec :

<div id="nb1" class="div1">le contenu de la div numero 1
<div id="nb2" class="div2">le contenu de la div numero 2 a montrer au survol de la 1ere</div>
</div>


Et dis nous si ca fonctionne mieux ;)

Si oui, alors tu n'as pas beaucoup de choix : Soit re-organiser tes balises, soit utiliser du JS :)
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
146
Date d'inscription
lundi 29 juin 2009
Statut
Membre
Dernière intervention
23 mai 2012
6
Salut,

Ce serait possible d'avoir le code HTML associé, s'il te plait ?

Pas très simple de trouver le problème, sans ca :D

Au niveau du CSS, je vois pas de problème, en tout cas.
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
Sauf que le hover c'est pas juste pour des a ??
Je te propose d'utiliser jquery avec toggle,..

$('#div1').hover(function(){$(this).find(ladiv que tu veux).toggle()});

et le contenu caché de #div1 s'affichera s'il est caché et se cachera s'il est visible
Messages postés
587
Date d'inscription
samedi 7 juin 2008
Statut
Membre
Dernière intervention
4 juin 2011
46
>>Mopra-L
(mon html ne t'aidera pas plus)

jai 2 div (div1 et div2) et je voudrai afficher la div2 en survolant la div 1

(c'est pour un ptit menu)

>>jona303
merci c'est super sympa mais j'avai ecri ca :

par contre des trucs simple svp, jaime pas copier bètement sans comprendre

donc si tu me file un bout de code c'est super sympa mais c'est pas mon but

je veu apprendre dans l'ordre et la j'aprends le css et jai des fois pun peu de mal déja...

merci en tout cas d'avoir proposé
Messages postés
146
Date d'inscription
lundi 29 juin 2009
Statut
Membre
Dernière intervention
23 mai 2012
6
Disons qu'avec le HTML, j'aurais pu faire des tests chez moi, c'est tout.

Apres, même si le hover fonctionne pour autre chose que la balise a (ca marche pour ul et li, par exemple), je ne sais pas si ca fonctionne pour les div, mais y a pas de raisons.

Et que fait ton code, au juste ? La div 2 ne s'affiche pas ? Elle reste tout le temps affiché ? Est-ce que tu es sûr qu'elle se trouve dans ton code ? (Verifie la source)

Ce serait bien de nous donner un peu plus de détails, parce que je ne vois pas bien ou est le problème exactement :)
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
465
As tu pensé à masquer le menu dans son état initial ?
#div2
{
      display: none;
}
#div1:hover #div2
{
      display: block;
}
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
héé en css on ne peut pas agir sur une autre div que celle qui est déclarée
tu peux pas dire en css #div1{div2.display:block}

Pour moi il n'y a que le javascript qui peut marcher
Messages postés
587
Date d'inscription
samedi 7 juin 2008
Statut
Membre
Dernière intervention
4 juin 2011
46
sisi jona303 tu peu parafaitement le faire en CSS c'est le principe meme des menu css...
jai trouvé ce tuto :
http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php

qui démontre que cela fonctionne très bien sans JS.

donc pour répondre plus haut je ne parlai pas vraiment d'un soucis mais je demandai surtout comment faire voila :)
c'est pour cela que je ne donne pas de code html precis

on imagine bien une div1 et une div2 sans donne de source ^^

bon aller d'accord rrooohhh..


.div2
{
     display:none;
}
<div id="nb1" class="div1">le contenu de la div numero 1</div>

<div id="nb2" class="div2">le contenu de la div numero 2 a montrer au survol de la 1ere</div>



voila ! :)

la question est :

quel class css devrais je appliquer pour afficher ma div 2 via :hover ?