Titre: changement de style sur une image survolée... ?
Posté par: jrs le le 13-06-2005 a 15:50:09
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
|
Titre: Re:changement de style sur une image survolée... ?
Posté par: jb_gfx le le 14-06-2005 a 05:00:16
Sans le code HTML ça va être facile. Je demande à ma boule de crystal "A quoi applique t'il sa classe cadre-photo? Aux liens, images, à un autre conteneur?" ... Elle me répond "J'en sais fouttre rien tu m'as pris pour madame Irma?!?"
Donc voilà on a essayé mais c'est raté :P
|
Titre: Re:changement de style sur une image survolée... ?
Posté par: jrs le le 14-06-2005 a 08:46:03
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) |
Titre: Re:changement de style sur une image survolée... ?
Posté par: jrs le le 14-06-2005 a 08:53:21
tu peux aussi lire le titre :
"changement de style sur une image survolée... ?"
ou encore lire le nom du style : "cadre-photo"...
Il t'arrive de lire un post avant de te mettre à critiquer ?
Ta madame Irma repassera... |
Titre: Re:changement de style sur une image survolée... ?
Posté par: jb_gfx le le 14-06-2005 a 17:00:01
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>
|
|
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|