[Résolu] Hover en CSS

Bonjour,

j'ai un problème pour contrôler des effets (sans utiliser JavaScript) avec la fonction hover dans CSS.

En effet j'essaye d'afficher une section div en passant par une autre section div
J'ai lu et essaye diverses choses mais il n'y a rien qui a marché

En HTML j'ai:

div class="program programText">Program</div>
        <div class="program programButton">&nbsp;</div>

Et en CSS j'essaye le truc suivant:

.programText {
	left: 0px;
	width: 120px;
	text-align: center;
	vertical-align: bottom;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	line-height: normal;
	font-weight: bold;
        display: none;
}
.programButton {
	width: 30px;
	left: 120px;
}
 .programText .programButton:Hover{
	display: inline;
}

Modifié par vinoureux1 (15 Feb 2011 - 09:33)

Il faudrait que programtext soit enfant de programbutton pour que ca marche (pas sur que ca marche pas testé cette méthode (en tout cas sous ie6 ca ne marchera pas, car ie n'intercepte le hover que sur les liens), mais visiblement les menus sont fait comme ca sur certains sites aujourd'hui)

là tu as marqué en css :

programtext qui a un enfant programbutton avec l'evenement hover est affiché en tant qu'élément en ligne
Modifié par rs459 (14 Feb 2011 - 23:56)

Bonjour,

merci pour la réponse mais malheureusement cela ne marche pas
J'ai essayé:

.programButton .programText:Hover{

Ainsi que:

.programButton:Hover .programText{

Mais toujours rien!

Visiblement il doit y avoir une astuce...

Non tu ne m'as pas compris.

C'est le code html qui doit être revu.

Ton css ne peut pas être valide, tu indiques un lien de parenté, mais cette parenté n'est pas présente dans la structure html, ca ne peut pas coller.

.classparente repondant au critere : pseudo-classe alors styler .classenfante {
comme : ca;
}

<div class="classparente"><div class="classenfante"></div></div>

Regarde comme ca, je regarderais si j'ai le temps demain, là c'est l'heure d'aller dormir pour moi

Modifié par rs459 (15 Feb 2011 - 02:08)

Exact, mea culpa je n'avait rien capté. Dormir c'est le meilleur remède.

Pour ceux qui ont le même problème:
HTML:

<div class="program programButton"><div class="program programText">Program</div></div>

et on CSS il faut donc:

.programText {
	left: -120px;
	width: 120px;
	text-align: center;
	vertical-align: middle;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	line-height: normal;
	font-weight: bold;
	position: relative;
	display: none;
}
.programButton {
	width: 30px;
	left: 120px;
	position: absolute;
}
div.programButton:hover div.programText{
	display: block;
}

Merci beaucoup.