Rollover d'image de fond sur une div

[Nicosmos]

Hello ! Je sais, je poste plein de questions en ce moment (et je ne répond pas encore à tout parceque j'ai pas encore essayé) mais c'est parceque je suis sur un projet ou y'a pleins de truc que je sait pas faire.

La question du jour :

J'ai une Div avec pleins de choses dedans (titre, texte, image, liens, champs, bouton ...). Je voudrais que lorsque la souris passe par dessus la Div (et quoique elle fasse dedans ...), son image de fond soit remplacée par une autre

J'ai essayé avec un :hover sur l'ID de la Div, ça n'a pas l'air de fonctionner : ce sont les objets à l'intérieur qui prennent en partie la nouvelle image du fond lorsqu'on passe sur chacun d'entre eux ^^

Voilà, savez-vous comment faire ?

Merci,
Nico.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

[Benoit]

Tu peux préciser ce que tu as fait exactement (la ligne de CSS) ?

Je me demande si tu ne devrais pas utiliser div#id pour sélectionner explicitement le div et rien d'autre.

[martin]

idem benoit, çà devrait marcher, le code aiderait à trouver le pourquoi du merdouille.

Je me demande si tu ne devrais pas utiliser div#id pour sélectionner explicitement le div et rien d'autre.

sur le selecteur à mon avis, si c'est un id, #id devrait être plus efficace que div#id, par contre si c'est une classe div.maClasse devrait être plus efficace que .maClasse.
http://developer.mozilla.org/en/docs/Wr ... icient_CSS

[Benoit]

Je ne parle pas d'efficacité, en fait je me demandais s'il n'avait pas utilisé un sélecteur descendant sans faire exprès. Enfin, on verra

[Nicosmos]

Merci, je viens de tester cette solution, mais ça n'a pas l'air de fonctionner.
la page est ici : http://adalytor.free.fr/jouer/connexion/index.html

Ce sont les deux Div avec le fond noir translucide qui devront changer de fond (en commentaire dans les CSS)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

[martin]

fastoche :

Code : Tout sélectionner

#cadre-gauche:hover {
     background-image: url(theme/cadre-petit-on.png);
}

pas d'espace entre '#cadre-gauche' et ':hover'.

@benoit, oups désolé

[Nicosmos]

fastoche :

Code : Tout sélectionner

#cadre-gauche:hover {
     background-image: url(theme/cadre-petit-on.png);
}

pas d'espace entre '#cadre-gauche' et ':hover'.

Wâh, tout simplement
Beuh, pour un espace

Merci beaucoup

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

[Benoit]

Effectivement, un espace dans un sélecteur veut dire "descendant".

Code : Tout sélectionner

#cadre-gauche:hover

veut dire "l'élément s'appelant cadre-gauche, lorsqu'il est survolé", tandis que

Code : Tout sélectionner

#cadre-gauche :hover

veut dire "n'importe quel élément descendant de l'élément cadre-gauche, lorsqu'il est survolé".

En général, on verra plutôt des constructions comme

Code : Tout sélectionner

#cadre-gauche a:hover

où c'est plus facile à comprendre (n'importe quel élément A descendant de cadre-gauche, lorsqu'il est survolé)