Discussion :

[19cmos83]

Bonsoir,

comme le titre l'indique, je cherche la fonction css, qui permet de gérer le mouseOver pour une div quelconque ...

div#maDiv:onMouseOver{

}

Plus précisément dans ma div, j'ai une image et j'aimerais en remplacer l'image quand l'user fait un mouseOver avec la souris dessus.

Merci.

[Erwan31]

Bonjour,
la pseudo-classe dynamique onMouseOver n'existe pas > c'est :hover qu'il faut utiliser.
Pour remplacer ton image sans passer par javascript et si tu souhaites que ça fonctionne sous IE6 (les peudo-classes dynamiques ne sont appliquées que sur les liens sur IE6-), tu dois créer un lien.
Selon le contenu du div, ce dernier n'est peut-être pas nécessaire.
Pour éviter les problèmes de latence dû au chargement de l'état hover de l'image et faire l'économie de son preload en JS, il est préférable de ne créer qu'une seule image 'en background CSS avec les 2 états et sur laquelle on appliquera une translation verticale pour afficher l'état hover.

Exemple pour une image de 200X200 (affiché) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
a.class {display:block; width: 200px; height:200px; background: url(...)}
a.class:hover {background-position: 0 -200px}

Je te donnerai plus d'explication si cette technique te convient.

[19cmos83]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
a.class {display:block; width: 200px; height:200px; background: url(...)}
a.class:hover {background-position: 0 -200px}

En faite, si je comprends pas trop ce que tu fais. Pour moi, tu as tes deux images superposées, et quand je fais un :hover sur l'image, je décale l'image en avant plan, de 200px pour la faire disparaitre du cadre IHM, et ainsi je laisse place à l'image qui était en arrière plan en donnant l'illusion qu'une autre image soit appelée. N'est ce pas ?

[Erwan31]

Bonjour,
Il n'y a qu'une seule image qui comprend les 2 états placés l'un sur l'autre (l'état hover). Le passage du curseur sur le lien provoqueune translation verticale de l'image de 200px vers le haut qui permet d'afficher l'état hover.