Hover en JavaScript

[ZeBrian]

Bonjour,

Tout d'abord, je tiens à signaler que contrairement à ce que pourrait faire penser le titre de ce post, je ne cherche pas exactement à créer un effet similaire au "hover" de CSS grâce à JavaScript. Ce que je cherche à faire est probablement impossible, c'est pourquoi je vous pose la question : puisqu'il est possible de modifier le style d'un objet HTML par JavaScript, est-il possible de modifier son style:hover, style:focus ou encore style:active ? Je parle ici de modifier directement le style CSS de l'objet, en particulier son statut "hover"...

Pour clarifier un peu la situation, un exemple de ce que je voudrais pouvoir faire :

var obj = document.getElementById('objet'); // on sélectionne "objet" (on supposera que c'est un lien pour que hover fonctionne toujours)
obj.style.background = 'blue';	// on définit la couleur de fond de l'objet
obj.style_hover.background = 'red';	// on définit sa couleur de fond lorsque la souris passe au-dessus

En espérant que vous aurez compris ce que je demande, merci d'avance !

PS : Les solutions consistant à définir au préalable le style de l'objet en question ne me conviennent pas, car le style de l'objet pourra être changé à travers JavaScript...

Modifié 12 Février 2007 par ZeBrian

[Sarc]

Bonjour,

La solution que j'avais utilisé quand j'avais voulu faire ça était :

onmouseover="this.style.background='#FEFFE7'" onmouseout="this.style.background='#FFFBD0'"

Ca remplace le hover...

Pour le active, ça doit être onclick qu'il faut utiliser !

De plus, ça ne marche pas que sur les liens, ça marche pour tous les éléments qui peuvent avoir un fond.

[ZeBrian]

Merci pour ta réponse mais ce n'est pas exactement ce que je recherche ! Je ne cherche justement pas d'alternative au CSS : je veux agir sur les propriétés CSS de l'objet correspondant au statut "hover"... Seulement il me semble que c'est impossible, c'est pourquoi je pose la question

Sinon, je limitais mon cas aux liens car, sous IE6, l'action "hover" ne s'applique qu'à la balise <a>

Modifié 12 Février 2007 par ZeBrian

[TheRec]

Bonjour,

je peux peut-être te donner une piste du côté de jQuery, de base les pseudo-classes :hover, :focus, etc. ne sont pas implémentées dans les sélecteurs, mais il y a un plugin permettant d'étendre les possibilité de sélection et inclure la majorité des pseudo classe. Je ne suis pas certain que c'est ce que tu cherche, j'ai eu l'impression que tu souhaite quelque chose qui se règle en une fois pour tous les :hover qui sont défini pour une classe, mais cette solution ne permet que de modifier l'élément sur lequel la souris est actuellement : Selectors Plugin

Si c'est ce que tu cherches, une fois l'élément sélectionné tu pourras modifier ses propriétés CSS simplement comme tu l'aurais fait avec tous autres éléments (comme dans ton exemple : obj.style.<propriété>). Cela implique donc d'appliquer les modifications de style à chaque fois qu'un élément est survolé.

Sinon je ne connais pas d'autre manière de faire... Javascript a effectivement ces limites lorsqu'il s'agit de modifier le style des éléments.

[ZeBrian]

Merci pour ta réponse, effectivement c'est une piste mais tu confirmes bien ce que je pensais : on ne peut pas modifier le style CSS associé au statut "hover" d'un élément après chargement... Ça fait un truc de plus à ajouter à ma librairie !

Je mets le sujet en résolu puisque irrésolvable

EDIT : Ah non impossible de modifier le premier post

Modifié 12 Février 2007 par ZeBrian

[TheRec]

Normal, tu as un certain temps pour modifier tes messages... mais ne t'en fait pas, un modérateur aurait de toutes façons enlevé le "Résolu" du titre de ton message, Dan ne souhaite pas être positionné en premier sur ce mot clé dans les moteurs de recherche

P.S. : Je n'ai pas la science infuse non plus... je t'ai dit que je ne connaissais pas d'autre solution, pas qu'il n'en n'existait pas une

[petit-ourson]

var obj = document.getElementById('objet'); // on sélectionne "objet" (on supposera que c'est un lien pour que hover fonctionne toujours)
obj.onmouseout = function() { this.style.background = 'blue';};	// on définit la couleur de fond de l'objet
obj.onmouseover = function() { this.style.background = 'red';};	// on définit sa couleur de fond lorsque la souris passe au-dessus

Ce code devrait fonctionner. Il est certainement plus logique de mettre du "this.className" (avec des classes définies dans une feuille de styles) au lieu des "this.style.background" mais je te laisse optimiser cela comme tu le souhaites.

[TheRec]

petit-ourson> ZeBrian a déjà indiqué que ce code n'était pas ce qu'il cherchait quelques messages plus haut (lors de sa réponse à sarc)