[résolu] Empêcher a:hover{background-color} au survol de lien-image ?

malgré mes recherches, je n'arrive pas à résoudre le petit problème suivant :
mes liens de type texte sont stylés ainsi:

a {
	color: #3399CC;
	text-decoration: none;
}

a:hover, a:focus, a:active {
	background-color: #9ECDE5;
	color: #2E80AB;
}

je voudait qu' il n'y ai pas de fond coloré lors du survol de mes liens-images
quelle formule ?? quelle combinaison de class ??
faut il passer par un id commun à chaque image avec la règle:
#image a:hover, a:focus, a:active {texte-decoration: none} ???
merci

Modifié par robby (19 Mar 2005 - 21:49)

Qu'appelles-tu décoration ? Une bordure sur les images ?

Un petit tour dans la faq :
http://forum.alsacreations.com/faq/#item7

robby a écrit :

je voudait qu' il n'y ai pas de decoration pour mes liens-images
(a:hover, a:focus, a:active {texte-decoration: none} )

Au cas où : la propriété est text-decoration, et non texte-decoration...

je crois qu'il faut mettre

img a, a:hover, a:active {
border: 0
}

Fait un test, je suis pas très sur de la synthaxe mais ça doit s'en approcher

GuizBizet a écrit :
je crois qu'il faut mettre

img a, a:hover, a:active {
border: 0
}

Fait un test, je suis pas très sur de la synthaxe mais ça doit s'en approcher

Igor a donné la solution

Ce que tu proposes (img a), va s'appliquer aux liens dans les images, ce qui n'existe pas
Et a:hover, a:active va s'appliquer à tous les liens de la page (puisque tu n'as pas reprécisé "img")
Modifié par Raphael (16 Mar 2005 - 13:22)

merci raphael

effectivement je me suis complètement trompé de syntaxe et je n'avais pas vu le lien de Igor

milles excuses

ok merci, je vais étudier ça pour ce soir !
Modifié par robby (16 Mar 2005 - 15:19)

aaaaaaaaaaaaaaaahhh !!!!!!
j'ai fait une grave confusion avec text-decoration !!
le problème ne viens pas de ce dernier qui n'est là que pour supprimer le soulignement des liens par défault, je me suis mal exprimé

le problème viens de : a:hover {background-color: #9ECDE5}
ce fond bleu apparaît quand on survole une image (intégrées dans un lien), c'est normal, je sais, mais c'est vraiment moche !

un exemple concret : cliquez sur mon site et survolez l'image "xhtml 1.0 validome", à droite, en bas du sidebar

comment faire pour ne pas avoir le "background-color" qui apparaît juste pour les "images-liens" ?
il faudrait trouver une propriété css qui l'annule (....) non là je dit des conneries ...en plus il faudrait savoir à quel élément l'appliquer ...
le problème c'est que a:hover etc... sont des pseudo class ...

au secours à l'aide
à l'aide
à l'aide
Modifié par robby (16 Mar 2005 - 23:13)

j'ai un exemple qui fonctionne bien , il faut juste un "border :0" :

(X)HTML :

        <a href="http://validator.w3.org/check?uri=referer">
          <img src="./images/valid-xhtml11.png"
               title="Valid XHTML 1.1!"
               alt="Valid XHTML 1.1!"
               class="logo_w3c"/></a>

CSS :

.logo_w3c {
	border: 0;
}

Tu dois donner une classe à ce type de liens et lui donner les propriétés que tu souhaite. Cela, car tu as ajouté un fond à tous les liens générique de tes pages.

la propriété boder:0 n'est là que pour empêcher les bordures qui apparaîssent par default dans IE autour des images !

relisez mon post

jb_gfx a écrit :
Tu dois donner une classe à ce type de liens et lui donner les propriétés que tu souhaite. Cela, car tu as ajouté un fond à tous les liens générique de tes pages.

peux-tu êtres un peu plus précis;merci

=> nemohp : merci mais ca ne marche pas : extrait de mon code :

<a href="http://www.validome.org/referer"><img class="logo_img"
	  src="http://www.validome.org/images/valid_xhtml_1_0.gif"
	  alt="Valid XHTML 1.0" height="39" width="97" /></a>

la class: j'ai même mis les deux : 0 et none

.logo_img {
	border: 0 none;
}
a:hover, a:focus, a:active {
	background-color: #9ECDE5;
	color: #2E80AB;
}

c'est pas un prob de boooooordure ! d'ailleurs j'ai déjà img {border: none} depuis longtemps dans ma css

problème non résolu
au secours raph !!
Modifié par robby (17 Mar 2005 - 21:43)

raphael, je vois que tu es en ligne, peux tu me dire si ma requête est possible
cf expliquaciton sur ce message
http://http://forum.alsacreations.com/posting.php?action=newp&tid=2454&fid=4&p=1#p23514
merci, trés urgent

Ton lien ne marche pas.

Voilà la réponse à ta question. Regarde les différentes valeurs possibles de Background
Modifié par Raphael (18 Mar 2005 - 13:59)

=>raphael:
pour le lien je faisait juste référence à mon message plus haut dans la conversation : voir post
j'ai beau étudier les background depuis une heure, je ne vois quelle valeur permet de ne pas l'afficher au survol de mes liens de type image :

a:hover, a:focus, a:active {
background-color: #9ECDE5;
color: #2E80AB;
}

je suis pommé, j'ai l'impression que personne n'a compris mon petit problème:
je pose la question plus simplement :
Quand on a spécifié l'apparition d'un fond coloré au survol de tous types liens (a:hover {background-color : #9ECDE5}), est- il possible d'empêcher qu'il apparaisse quand le liens est une image ???? car c'est vraiment très moche
merci de bien vouloir m'aider, et promis j'arrête de vous emm......der

Dans le lien que je t'ai donné, l'une des valeurs est "background: none"

désolé mais ça ne fonctionne pas !!
sans vouloir te contredire raphael, la déclaration "background : none" ne s'applique que pour les images utilisées en fond
ainsi {background : none} équivaut à {background-image :none}

, hors mon souhait est d'empêcher l'affichage du "background-color" (généré par la pseudo class a:hover) ,lorsque le lien est une image (une balise <img> à l'intérieur d'une <a> !!

la déclaration {background-color : none} n'existe pas !

le problème en image pour être plus clair
les liens de type texte :



les liens de type image :



je voudrait empêcher ce put... de fond bleu qui apparaît (pour les img uniquement (cf page d'accueil de mon site web)


les règles suivantes appliquées à l'image du lien ne fonctionnent pas : (évidement !, relisez le début du post)

.logo_img {
	background: none;
}

a > img {
	background: none;
}

a img {
	background: none;
}

de l'aide please
j'en appel aux grands gourou du CSS
Modifié par robby (19 Mar 2005 - 00:03)

En théorie tu devrait faire ca

a:hover, a:focus, a:active {
background-color: #9ECDE5;
color: #2E80AB;
}
a.non:hover, a.non:focus, a.non:active {
background-color: couleurdetonfondoupasdecouleur;
}

<a href="#">bla bla bla</a>
<a class="non" href="#"><img scr="image.gif" /></a>

parce que l'image est dans ton lien, mais l'image n'as rien a voir avec le fond de couleur ! c'est le tag <a/> qui le fait, donc tu lui attribue un style différent !
Modifié par Lorr Hyde (19 Mar 2005 - 00:59)

=> lorr hyde : ?????? c'est la première fois que je vois un truc comme cà :
a.non:hover { ....}
tu es sûr que ça correspond a class="non"
je vai tester dans la journée, si j'ai le temps, mais je suis trés ceptique sur ta proposition,
merci, affaire à suivre

y a t il d'autres gourous du CSS en ligne ????
le coucours est lancé, le premier qui trouve la solus, je lui fait de la pub sur mon site !!!!