Jump to content
Sign in to follow this  
fredwat

changement de couleur texte au survol

Rate this topic

Recommended Posts

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:

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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 :)

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other 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)

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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 :)

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Salut,

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

Merci.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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 :)

Share this post


Link to post
Share on other 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)

Share this post


Link to post
Share on other 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]

Edited by Wanbli

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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;
}

Share this post


Link to post
Share on other 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 !! ;)

Share this post


Link to post
Share on other 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 ;)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other 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 !!!

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...