18041 sujets

Questions générales et questions de débutants

Aide pour masquage/affichage sur div

salut à tous,

voila j'ai un petit problème, je ne parviens pas à faire afficher au survol les div "D" et "I". Quelqu'un sait d'ou pourrais venir le problème?

Merci d'avance pour vos info

<style type="text/css">
#A {
	float: right;
}
#B {
	color: #999;
	float: left;
	margin-top: 4px;
	font-weight: bold;
}
#C {
	color: #999;
	background-color: #FCF;
	float: left;
	margin-top: 4px;
	font-weight: bold;
} 
#C:hover #D {
	display: block;
}
#D {
	float: left;
	display: none;
}
#E {
	color: #999;
	float: left;
	margin-top: 4px;
	font-weight: bold;
}
#F {
	color: #999;
	float: left;
	margin-top: 4px;
	font-weight: bold;
}
#G {
	color: #999;
	background-color: #3CF;
	float: left;
	margin-top: 4px;
	margin-left: 10px;
	font-weight: bold;
}
#H {
	color: #999;
	float: left;
	margin-top: 4px;
	font-weight: bold;
} 
#H:hover #I {
	display: block;
}
#I {
	float: left;
	display: none;
}
#J {
	color: #999;
	float: left;
	margin-top: 4px;
	font-weight: bold;
}
#K {
	color: #999;
	float: left;
	margin-top: 4px;
	font-weight: bold;
}
</style>
</head>

<body>
<div id="A">
        <div id="B">1</div>
        <div id="C">&nbsp;AAA</div>
        <div id="D">
          <div id="E">&nbsp;BBB</div>
          <div id="F">&nbsp;CCC</div>
        </div>
        <div id="G">2</div>
        <div id="H">&nbsp;AAA</div>
        <div id="I">
          <div id="J">BBB</div>
          <div id="K">&nbsp;CCC</div>
        </div>
      </div>
</body>
Oui d'accord mais par défaut c'est display:none à D comme à I.
Si tu veut les faires changé d'état au survole du pointeur tu devras soit utilsé javascript (JQuery) ou utilisé :hover en CSS.

Sinon développe un peu plus cette séquence. Quelles sont tes intentions ?

..
Modifié par zardoz (07 Aug 2011 - 17:36)
Oui c'est bien ça, les div sont par défaut cachés et donc je voudrais avec la fonction hover les faire apparaitre au survol, mais apparemment y dois y avoir une erreur quelque part?
Bonjour,

En CSS, ce que tu essaye de faire est impossible.

Il faut utiliser du JavaScript, et faire le masquage des div en JavaScript (pour l'accessibilité).
Il faudrait que #I soit enfant de #H pour que ça fonctionne. Mais de toute façon la suggestion de Laurie-Anne est la meilleure solution.
au lieu de #C:hover #D
essaye de faire #C:hover + #D

je ne suis pas sur du résultat.
Sujet clos
Aller à