Aller au contenu

changement de couleur texte au survol


fredwat

Sujets conseillés

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:

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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:

Lien vers le commentaire
Partager sur d’autres sites

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!

Lien vers le commentaire
Partager sur d’autres sites

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 :)

Lien vers le commentaire
Partager sur d’autres sites

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:

Lien vers le commentaire
Partager sur d’autres sites

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 B)

Lien vers le commentaire
Partager sur d’autres sites

À 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

Lien vers le commentaire
Partager sur d’autres sites

À 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 :P

Lien vers le commentaire
Partager sur d’autres sites

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 :)

Lien vers le commentaire
Partager sur d’autres sites

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 :D

Lien vers le commentaire
Partager sur d’autres sites

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é par Sylvain Trovalet
Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

Guest meta nando

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)

Lien vers le commentaire
Partager sur d’autres sites

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é par Wanbli
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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 B)

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

Lien vers le commentaire
Partager sur d’autres sites

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 !! ;)

Lien vers le commentaire
Partager sur d’autres sites

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 ;)

Lien vers le commentaire
Partager sur d’autres sites

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 !!!

Lien vers le commentaire
Partager sur d’autres sites

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...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...