Image et a:hover

Bonjour.

J'ai surchargé la classe de base a:hover telle que

Citation:

---

a:hover
{
color: yellow;
background-color: blue;
text-decoration: none;
}

---

J'aimerais surchargé les images servant de liens d'une autre manière. Par exemple, ici les testes des liens sont surlignés quand je passe la souris dessus, pour les images j'aimerais qu'elles soient encadrées. Comment dois-je m'y prendre ?

Merci d'avance.

@+
Rémi

Salut,

Etant donné qu'internet explorer ne gère le hover que sur les balise <a> il faut encadrer ton image de ces balises et leur appliquer quelques lignes de css.

css

Code:

---

1 2 3 4 5

a.survol:hover { border: 5px solid #f00; display: block; width: 100px; /* hauteur de l'image à encadrer au survol */ }

---

html

Code:

---

<a class="survol" href="#"><img src="mon_image.jpg" width="100" height="100"></a>

---

Merci pour tout, effectivement comme cela ça marche. En revanche

Citation:

---

Etant donné qu'internet explorer ne gère le hover que sur les balise

---

Cela veut-il dire qu'avec un autre navigateur le résultat ou la méthode pourraient être différents ?

Merci encore.

@+
Rémi

Salut,

Avec un navigateur qui supporterais réellement la pseudo classe :hover, on pourrait écrire tout simplement :

Code:

---

1 2 3

img:hover { border: 5px solid #f00; }

---

Helas jusqu'a présent IE ne supporte cette pseudo-classe que sur des tags <A>

En revanche Mozilla, Safari, Opera... le gèrent sans problème.