28172 sujets

CSS et mise en forme, CSS3

Style qui s'applique à plusieurs éléments

Bonjour, ce que je vais vous expliquer et vraiment bizarre: J'ai un conteneur composé de 3 div: #Header, #Content, #Footer. Lorsque le curseur survole ce conteneur (quelque soit la div), je voudrais quelle s'éclaircisse, autrement dit avec un code qui n'existe pas:

#Header {
 background:url('/Medias/Block/Header.png');
}

#Content {
 background:url('/Medias/Block/Content.png');
}

#Footer {
 background:url('/Medias/Block/Footer.png');
}

#Header:hover {
 #Header {background:url('/Medias/Block/Header_Hover.png');};
 #Content {background:url('/Medias/Block/Content_Hover.png');};
 #Footer {background:url('/Medias/Block/Footer_Hover.png');};
}

#Content:hover {
 #Header {background:url('/Medias/Block/Header_Hover.png');};
 #Content {background:url('/Medias/Block/Content_Hover.png');};
 #Footer {background:url('/Medias/Block/Footer_Hover.png');};
}

#Footer:hover {
 #Header {background:url('/Medias/Block/Header_Hover.png');};
 #Content {background:url('/Medias/Block/Content_Hover.png');};
 #Footer {background:url('/Medias/Block/Footer_Hover.png');};
}


Donc comme je disais c'est vraiment bizarre, je voulais savoir si un code (qui existe lui) fasse ce que représente (oui car entendez bien là une représentation) mon morceau de code ci dessus.

Voilà, merci.
Modérateur
ou du css bien fait ^^


#conteneur:hover #header {
  background:url('/Medias/Block/Header_Hover.png');
}
#conteneur:hover #Content {
  background:url('/Medias/Block/Content_Hover.png');
}
...
Salut

Normalement ce que kustolovic t'a proposé doit marcher, à part ne pas avoir bien implémenté ce qu'il a demandé, j'espère quand même que tu as fait une petite modification au niveau de ta structure Html pour que les css puissent prendre effet, qui est de mettre tes éléments au sein d'un conteneur div avec un id="conteneur", cela marche très bien.

Toute fois si ton site est destiné au grand publique et par conséquent tu t'intéresses à quelques anciennes versions de IE (Qui ne reconnaissent le hover que pour les liens <a>), dans ce cas tu dois prendre la solution de jb_gfx qui est de faire recours à javascript.

Si j'ai été à ta place je ferais recours aux deux solutions car si Javascript est désactivé (La solution javascript est la préférable), tu auras au moins la solution css qui marche sur les navigateurs modernes.

Bonne courage
Modifié par unami (15 Mar 2012 - 01:16)
Sujet clos
Aller à