css div1:hover div2 Fermé

Question

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

Mopra-L · Answer

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.

jona303 · Answer

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

rudak · Answer

>>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é

Mopra-L · Answer

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

arthezius · Answer

As tu pensé à masquer le menu dans son état initial ?

#div2
{
      display: none;
}
#div1:hover #div2
{
      display: block;
}

jona303 · Answer

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

rudak · Answer

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

le contenu de la div numero 1

le contenu de la div numero 2 a montrer au survol de la 1ere

voila ! :) la question est : quel class css devrais je appliquer pour afficher ma div 2 via :hover ?

Mopra-L · Answer

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 :

le contenu de la div numero 1

le contenu de la div numero 2 a montrer au survol de la 1ere

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

Css div1:hover div2

8 réponses

Discussions similaires