Bonjour,

J'utilise un CSS externe.
Pour une page contenant des images avec liens, j'ai défini une bordure aux images dans le css... :

.cadre-photo-2 {border: 1px solid #33FF00;}

J'aimerais que lors du survol de l'image, la couleur et l'épaisseur de la bordure change... j'ai tenté ceci, mais cela ne fonctionne pas :

.cadre-photo-2 {border: 1px solid #33FF00;}
.cadre-photo-2 a:hover {border: 20px solid #0000FF;}

Quelqu'un voit-il oú est l'erreur ?

Merci d'avance... ;o)
JRS

c'est écrit dans mon post :
"Pour une page contenant des images avec liens, j'ai défini une bordure aux images dans le css... :"

;o)

T'as pas été touché par la fée humour à la naissance toi... enfin passons...

T'aurais trés bien pu avoir un div englobant tes images pour leur appliquer la bordure, ça aurait produit le même effet avec un balisage différent.

Code:

<div class="cadre-photo"> <img ... /> </div>

Ou un span :

Code:

<div class="cadre-photo"> <img ... /> </div>

Ou une liste :

Code:

<ul> <li class="cadre-photo"> <img ... /> </li> </ul>

Je pouvais pas deviner ton code vu que tu montre comme exemple :

Code:

.cadre-photo-2 a:hover {border: 20px solid #0000FF;}

Ce qui laisse logiquement présager que la balise à laquelle tu applique la classe "cadre-photo" contiendrait une balise <a>. Comme ça ne peut pas être le cas pour la balise <img>...

Donc pour ton rollover sur image, la solution logique est d'appliquer la pseudo-classe :hover sur tes images :

Code:

.cadre-photo-2 {border: 1px solid #33FF00;} .cadre-photo-2:hover {border: 20px solid #0000FF;}

Porblème cela ne fonctionnera que dans les navigateurs standards (Safari, Netscape, FireFox, Opera...) mais pas dans IE car il ne sait pas utiliser hover sur autre chose que la balise a. Donc il faudrait que tu englobe tes images dans des liens.

Code:

.cadre-photo-2 img { border: 1px solid #33FF00; } .cadre-photo-2:hover img { border: 20px solid #0000FF; }

Et ton code HTML deviendrais un truc comme ça :

Code:

<a class="cadre-photo-2" href="#"><img src="1.jpg" alt="boo" /></a> <a class="cadre-photo-2" href="#"><img src="2.jpg" alt="boo" /></a> <a class="cadre-photo-2" href="#"><img src="3.jpg" alt="boo" /></a>