Discussion :

[srvremi]

Bonjour.

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

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

[ilood]

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 :

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

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 :

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

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

[srvremi]

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

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

[Taum]

Salut,

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

Code :

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

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.