Page 1 sur 1

Rollover d'image de fond sur une div

Publié : 16 févr. 2007, 08:09
par 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. :P

La question du jour : :wink:

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

Publié : 16 févr. 2007, 18:57
par 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.

Publié : 16 févr. 2007, 22:18
par martin
idem benoit, çà devrait marcher, le code aiderait à trouver le pourquoi du merdouille.
Benoit a écrit :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

Publié : 16 févr. 2007, 23:53
par 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 :)

Publié : 17 févr. 2007, 10:17
par 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 :wink:

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

Publié : 17 févr. 2007, 11:25
par 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é ;)

Publié : 17 févr. 2007, 12:27
par Nicosmos
martin a écrit :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 :shock:
Beuh, pour un espace :lol:

Merci beaucoup :wink:

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

Publié : 17 févr. 2007, 15:49
par 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é)