Aller au contenu

div et hover


Guest narcisse

Sujets conseillés

Guest narcisse
Posté

C'est en suivant les conseils Mr Laurent Denis qui me conseillait dans un post précédent de m'entrainer à restituer des Design que je viens de m'appercevoir qu'il est possible d'appliquer des hover sur des div

exemple

#pageHeader {
background-color:blue;
}
#pageHeader:hover {
background-color:red;
}

C'est quand même remarquable et sympa comme effet....

Par contre, seul problème comme d'habitude, IE ne semble pas reconnaitre ce code.

Je souhaiterais savoir si il est possible d'appliquer une modification pour que les utilisateurs d'IE profite de cette possibilité.

Posté (modifié)

Salut !

J'ai eu exactement le même problème il y à quelques jours, on m'a conseiller le Javascript, je ne pense pas qu'il y ait d'autres solutions à moin de mettre la div en a:hover... :huh:

Modifié par DJsmileyus
Posté

Salut,

effectivement il faut passer par javascript tant qu'ie n'évoluera pas.

document.getElementById('idDiv').styles.backgroundColor = "red";

par exemple.

Posté

En effet IE ne prend en compte la pseudo classe :hover uniquement sur les <a>

Pour ce qui est de mettre un <a> autour d'un <div> comme le propose Djsmileyus, c'est impossible, un élément inline ne peut pas contenir un élément block

Il serait envisageable (suivant le cas de figure de l'utilisation) de tout simplement faire un <a> et de lui attribuer la propriété display: block ; et d'ensuite agir dessus. Pour cette solution ca depend de l'effet recherché.

Pour la solution JS, c'est tout à fait utilisable, il faut vérifier que la desactivation du JS ne provoque d'entrave à l'acces au contenu.

Par exemple si c'est simplement un changement de style de la <div> on agit dessus via JS et si JS est desactivé et ben c'est pas la mort.

Donc on agit via css pour les gecko et opera (et les autres bons navigateurs) et via JS pour IE. Donc on se retrouve avec les utilisateurs d'IE JS desactivé sans effet de style supplémentaire, ce qui est très minime.

@++

ps : si tu veux un exemple de mise en oeuvre, demande !

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...