[CSS] Rollover sur une image : changer la bordure

Rollover sur une image : changer la bordure [CSS] - HTML/CSS - Programmation

Marsh Posté le 02-10-2003 à 14:38:58    

Je voudrais simplement changer la couleur de la bordure d'une image en passant par dessus.
 
Comme img:hover n'est pas supporté sur IE, j'ai pensé à ça :
a {
   border:thin solid green;    
}
a:hover {
   border:thin solid red;    
}
 
Mais ne fonctionne pas (ça marche mal sur IE et pas du tout sur les autres navigateurs)!
 
Le problème vient du fait que la balise <a> est une balise en ligne et que ces balises n'ont pas de dimensions donc pas de bordures possibles.
 
J'ai donc changé la balise <a> en block et lui ai donné la même largeur que l'image :
 
a {
display: block;
width: 118px; /* largeur de l'image survolée */
border:thin solid green;
}
a:hover {
border:thin solid red;
}
 
 
Ce n'est pas ce qu'il y'a de plus pratique, surtout si l'on a plusieurs images de largeurs différentes
Mais en attendant que IE se mette sérieusement aux normes, je ne vois pas d'autres solutions...
 
En avez vous ???


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 02-10-2003 à 14:38:58   

Reply

Marsh Posté le 02-10-2003 à 15:44:00    

Citation :

Le problème vient du fait que la balise <a> est une balise en ligne et que ces balises n'ont pas de dimensions donc pas de bordures possibles.


heu on peut mettre des bordures sur des span, pourtant ce ne sont pas des blocs

Reply

Marsh Posté le 02-10-2003 à 15:44:57    

Ben en tout cas, le résultat n'est pas du tout celui escompté


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 02-10-2003 à 15:49:46    

Après quelques tests, je dirais que c'est pas gagné pour faire joliment du cross-browser (= sans hacks vilains)

Reply

Marsh Posté le 02-10-2003 à 15:52:16    

Curieux tout de même pour un simple rollover de rien du tout ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 02-10-2003 à 22:38:51    

Bon, je conclus qu'il n'existe pas de méthode simple ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 02-10-2003 à 22:43:26    

Si si, mais c'est un secret bien gardé depuis des millénaire, et il faut faire ses preuves pour pouvoir le partager.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 02-10-2003 à 23:23:17    

Et si tu appliquais ta bordure à l'image ?
 

a img {
   border: thin solid green;    
}
 
a:hover img {
   border: thin solid red;    
}


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 03-10-2003 à 00:24:40    

gm> Oui, mais ça ne fonctionne pas sous IE :(
 
antp> allez, tu veux bien me prêter ta 106?


Message édité par sibelius le 03-10-2003 à 00:25:53

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 03-10-2003 à 09:53:01    

SIBELIUS a écrit :


 
antp> allez, tu veux bien me prêter ta 106?


 
nan :o

Reply

Marsh Posté le 03-10-2003 à 09:53:01   

Reply

Marsh Posté le 03-10-2003 à 10:16:04    

antp > Pfff  :kaola:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed