A:hover avec image

Bonjour,

J'ai une feuille de style qui met un fond jaune sur mes liens quand je passe la souris dessus.

Le problème c'est que mes liens images ont aussi un fond jaune.
Comment faire pour que je puisse avoir un fond jaune juste avec des liens normaux ( texte ) et pas avec les images.

Voila un extrait

a:hover	{
color:#221100; 
background-color:#ffff77;
}

Modifié par Igor (06 Oct 2007 - 14:47)

Il suffit juste de faire un css different pour les liens images.
ton code concerne les liens en général c'est à dire la forme qu'auront tous les liens de ta page.
Ce css est utilisé par défaut sur tous les liens
sauf si tu en defini un nouveau
exemple :

a.linkgrp {
// ici ton code css pour les images
}
a.linkgrp:hover {
// ici ton code css pour les images survolée
}

ne pas oublier d'ajouter class="linkgrp" sur ta balise img et/ou eventuellement sur la balise div si tu en utilise une.
Modifié par Igor (06 Oct 2007 - 14:48)

J'ai déjà essayé cette solution.

Mais si je ne mets pas de background-color, il me prends la valeur de a:hover
Si je mets background-color:#xxxxxx; J'ai alors une couleur de fond pour mon image mais je n'en veut pas.

Je continue sur cette piste. C'est comme si ma classe était inactive. J'ai mis donc une nouvelle classe dans le <a > faut il le mettre dans img ?

Voila ce que j'ai fait : J'ai supprimé la classe a:hover ( générale ) et ca marche. Maintenant à certains de mes liens, je mets une classe spéciale. Bon, c'est ce que je veux éviter mais je crois que je n'ai pas de choix
Modifié par aktos (06 Oct 2007 - 14:17)

C'est marrant chez moi çà marche

http://www.farscapefrenchscapers.fr/linkscss.php

Le CSS qui t'interresse :

<style type="text/css">
<!--
a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
}
a:hover {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background-color: #FFFF00;
}
.linkgrp {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background:none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.linkgrp:hover {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background:none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
a.linkgrp {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background:none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
a.linkgrp:hover {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background:none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
-->
</style>

petite précision : les deux lignes de css sans le a sont destinées à enlever le cadre (bleu ou violet) par défaut
Désolé j'ai choisi n jaune différent
Modifié par Scorpius (06 Oct 2007 - 14:55)