changement de couleur texte au survol

fredwat · 20 Juillet 2004

Bonjour

l'un de vous aurait il la gentillesse de me dire où je peux trouver le code qui permet de faire varier la couleur d'un texte lors d'un survol ( pour créer un lien non souligné )

je n'ai pas trouvé l'info sur les différents post du forum!

Ou alors j'ai très mal cherché...

Jusqu'à aujourd'hui je n'utilise pas de CSS ( mais j'y compte bien ! )

Merci de votre aide :wacko:

**Fupap** · 20 Juillet 2004

bonjour

j ai un truc comme ca dans la css, je ne sais pas si c est conforme mais ca marche

a:link{color:#f5c503;text-decoration: none;background : transparent;}

a:hover { color:#ffffff; background-color:333333;}

a:visited, a:active { color:f5c503; text-decoration: none;background : transparent;}

a:visited:hover {text-decoration : none; color : #ffffff; background : #333333;}

tu peux faire varier la couleur du lien, et la couleur de fond du lien

sailorcarom · 20 Juillet 2004

Hello !

C'est à peu près ça pour la couleur

a {text-decoration : none; cursor : pointer;}
a:link, a:active, a:visited {text-decoration : none;}
a:hover {text-decoration : none; color : #003399;}

Byebye

Caro :flower:

gou · 20 Juillet 2004

n'oubliez pas le a:focus!

celui-ci sert principalement à ceux qui naviguent au clavier ou avec certains lecteurs vocaux (si ne ne m'abuse). Bien entendu, inefficace dans IE, mais utile dans les vrais fureteurs!

fredwat · 20 Juillet 2004

bonjour
j ai un truc comme ca dans la css, je ne sais pas si c est conforme mais ca marche

a:link{color:#f5c503;text-decoration: none;background : transparent;}

a:hover { color:#ffffff; background-color:333333;}

a:visited, a:active { color:f5c503; text-decoration: none;background : transparent;}

a:visited:hover {text-decoration : none; color : #ffffff; background : #333333;}

tu peux faire varier la couleur du lien, et la couleur de fond du lien

Merci pour ton aide

je me colle aux essais dès que possible

Fred

fredwat · 20 Juillet 2004

Hello !

C'est à peu près ça pour la couleur

a {text-decoration : none; cursor : pointer;}
a:link, a:active, a:visited {text-decoration : none;}
a:hover {text-decoration : none; color : #003399;}

Byebye

Caro :flower:

Merci Caro

je vais essayer les différentes propositions

fred :rolleyes:

fredwat · 20 Juillet 2004

n'oubliez pas le a:focus!

celui-ci sert principalement à ceux qui naviguent au clavier ou avec certains lecteurs vocaux (si ne ne m'abuse). Bien entendu, inefficace dans IE, mais utile dans les vrais fureteurs!

Bonjour Gou

Merci

dois je rajouter le a:focus!

après le code fourni par Caro ?

Si oui à quel endroit?

Fred

gou · 20 Juillet 2004

À faire attention:

«Souvenez-vous LoVe|HAte pour vos liens

Pour spécifier vos pseudo-classes de liens (:hover etc.), utilisez lordre suivant: Link, Visited, Hover, Active. Aucun autre ordre ne fonctionnera correctement. Si vous souhaitez aussi utiliser :focus, il vous faut modifier lordre ainsi :LVHFA.»

Via CSS Crib Sheet (version française) de Dave Shea

fredwat · 20 Juillet 2004

À faire attention:

«Souvenez-vous LoVe|HAte pour vos liens

Pour spécifier vos pseudo-classes de liens (:hover etc.), utilisez lordre suivant: Link, Visited, Hover, Active. Aucun autre ordre ne fonctionnera correctement. Si vous souhaitez aussi utiliser :focus, il vous faut modifier lordre ainsi :LVHFA.»

Via CSS Crib Sheet (version française) de Dave Shea

Merci Gou

je creuse ça dès que possible et visiterai l'adresse indiquée

Fred

Desesperance · 20 Juillet 2004

Hoy !

Pour éviter les confusions, sachez que les bouts de codes donnés ne sont pas uniquement pour la couleur :

a {

text-decoration : none; <= ça c'est pour enlever le soulignement, ou l'effet barré si par exemple le lien se trouve dans un texte barré.

cursor : pointer; <= ça c'est le pointeur de la souris. Il change pour ce que vous mentionnez lors du survol du lien.

color:#003399; <= voila, c'est le code couleur à changer lors du survol

background-color:#000000; <= ça peut-être utile, couleur du fond du lien.

}

Vala, comme ça vous avez la possibilité d'enlever ce que vous ne souhaitez pas

fredwat · 20 Juillet 2004

Hoy !

Pour éviter les confusions, sachez que les bouts de codes donnés ne sont pas uniquement pour la couleur :

a {

text-decoration : none; <= ça c'est pour enlever le soulignement, ou l'effet barré si par exemple le lien se trouve dans un texte barré.

cursor : pointer; <= ça c'est le pointeur de la souris. Il change pour ce que vous mentionnez lors du survol du lien.

color:#003399; <= voila, c'est le code couleur à changer lors du survol

background-color:#000000; <= ça peut-être utile, couleur du fond du lien.

}

Vala, comme ça vous avez la possibilité d'enlever ce que vous ne souhaitez pas

c'est largement plus clair pour le néophyte que je suis

merci mille fois

fred

Desesperance · 20 Juillet 2004

Mais c'est un plaisir

Voulf · 21 Juillet 2004

Salut,

Qqun peut-il me donner un exemple d'utilisation de la pseudo-classe :focus dans un lecteur vocal?

Merci.

Sylvain Trovalet · 21 Juillet 2004

apparemment pour focus en fait on le met où l'on veut, c'est le seul électron libre du groupe

http://www.yoyodesign.org/doc/w3c/css2/sel...-pseudo-classes

et même pour CSS3 qui est en cours de construction

http://www.w3.org/TR/2004/CR-css3-ui-20040...#pseudo-classes

Modifié 21 Juillet 2004 par Sylvain Trovalet

Wanbli · 22 Juillet 2004

Heu autre question d'une autre néophyte :

Le a:link ça correspond a quoi ?

Parce que moi, sur ma Css j'utilise seulement

a 
a:hover

Jusqu'à récemment ma vie était étoilée de bonheur ... sauf que depuis que j'utilise Mozilla pour tester ... mes liens ne changent plus de couleur a rollover ...

Ceci serait-il lié ? O_O

Desesperance · 22 Juillet 2004

Grouik

Pour le rollover il te faut

a{

color:#couleur_de_base;}

a:hover{

color:#couleur_rollover;}

Et là, magie, ça marche sous Mozilla & Ie

22 Juillet 2004

Salut,

Le a:link ça correspond a quoi ?

Parce que moi, sur ma Css j'utilise seulement
a 
a:hover

a:link se réfère au lien non visité et qui n'est pas en interaction avec l'internaute (via la souris ou le clavier);

a:visited se réfère au lien visité et qui n'est pas en interaction avec l'internaute;

a:hover se réfère au lien visité ou pas qui est survolé par le pointeur;

a:active se réfère au lien visité ou pas sur lequel on clique, ou quand on tape "Entrée" quand celui-ci a le focus.

a:focus se réfère au lien visité ou pas qui a le focus du clavier

a (tout court) se réfère au lien sans distinction des états.

Cf: Les pseudo-classes d'ancres (Traduction des recommandations du W3C sur CSS2 par Yoyodesign)

Wanbli · 22 Juillet 2004

Grouik

Pour le rollover il te faut

a{

color:#couleur_de_base;}

a:hover{

color:#couleur_rollover;}

Et là, magie, ça marche sous Mozilla & Ie

Bin heu ... ouais c'est pourtant bien ce qu'il me semblait ... bon bin voila un copié collé de ma CSS par acquis de consisence ....

/*Les liens*/
A {
	color: #3a3a3a;
}
A:hover {
	color: #bac6dd;
}
A.petit {
	font-size: 9pt;
}
A.moto {
	color: #596f8b;
}
A.motomoyen {
	color: #596f8b;
	font-weight: 800;
}
A.motopetit {
	font-size: 9pt;
	color: #596f8b;
}
A.tri {
	color: #777777;
}
A.trimoyen {
	color: #777777;
	font-weight: 800;
}
A.tripetit {
	font-size: 9pt;
	color: #777777;
	}
A.moyen {
  font-weight: 800;
  color: #3a3a3a;
}

La couleur marche très bien pour IE .... Mais reste inchangée sous Mozilla ...

Où se cache donc la grossière erreur ???

O_o

[EDIT] Après etude et question posée a une collègue, il semblerait qu'il y ait conflit de couleur entre la couleur de mes sous catégories de liens et le Hover .... vous confirmez ??? [/EDIT]

Modifié 22 Juillet 2004 par Wanbli

Desesperance · 22 Juillet 2004

Grouik,

mets tous les "A" en "a"

Puis je sais pas lequel est le mieux syntaxiquement parlant (oulah) mais je fais plutôt :

.petit a

.petit a:hover

plutôt que a .petit

[EDIT] Après etude et question posée a une collègue, il semblerait qu'il y ait conflit de couleur entre la couleur de mes sous catégories de liens et le Hover .... vous confirmez ??? [/EDIT]

Pas possib' mzelle, y'a que des a, les a:hover sont pris en compte uniquement lors du survol.

C'est en tous cas pas un problème pour le a:hover de mozilla.

Monique · 22 Juillet 2004

La couleur marche très bien pour IE .... Mais reste inchangée sous Mozilla ...

Où se cache donc la grossière erreur ???

Bonjour,

Le a:hover doit toujours se trouver après les a, a:visited

 a {
  color: #4682B4;
 }
 a.petit {
  color: #778899;
 }
 a.petit:visited {
  color: #A9A9A9;
 }
 a:hover {
  color: #FFC0CB;
 }

Wanbli · 23 Juillet 2004

Alors là, Monique, franchement ...

CHAPEAU !!

La grossière erreur était donc là ....

J'ai simplement déplacé le A:hover en fin de liste et .... MIRACLE !

Ma couleur de survol marche sur Mozilla !

[ y'a vraiment des jours ou la vie est belle !!! ]

Bon bin j'y retourne !!

Monique · 23 Juillet 2004

Bonjour,

Voilà un exemple de plus, si besoin est, qui montre l'importance de travailler avec un navigateur interprétant correctement le code...

et de vérifier ensuite avec les autres

LaurentDenis · 23 Juillet 2004

Monique, je cherchais justement un exemple de problème bien concret posé par les implémentations incorrectes et la tolérance excessive des navigateurs envers la soup de tags... Merci

Wanbli · 23 Juillet 2004

Si pour ce genre de cas vous cherchez un cobaye ...

APPELEZ MOI !

A mon avis, vu mon niveau de mé-connaissance ... je dois collectionner sans le vouloir ce genre de cas d'école ...

En tous cas ... encore merci pour les réponses ... j'avance j'avance !!!

LaurentDenis · 23 Juillet 2004

Ce qui est gênant ici, Wanbli, ce n'est pas l'erreur du webmestre. C'est le comportement déroutant du navigateur qui ne révèle pas l'erreur... ça n'aurait jamais dû marcher pour IE, ce qui t'aurais immédiatement amené à chercher l'erreur de codage.

La permissivité des navigateurs face à un langage normalisé ne bénéficie pas auattn qu'on voudrait le faire croire à ceux qui utilisent ce langage...

Connexion

changement de couleur texte au survol

Sujets conseillés

fredwat

Fupap

sailorcarom

gou

fredwat

fredwat

fredwat

gou

fredwat

Desesperance

fredwat

Desesperance

Voulf

Sylvain Trovalet

Wanbli

Desesperance

Guest meta nando

Wanbli

Desesperance

Monique

Wanbli

Monique

LaurentDenis

Wanbli

LaurentDenis

Veuillez vous connecter pour commenter

Parcourir

Activité