[Résolu] Annuler background-color sur les liens contenant une image

Bonjour à tous,
Je suis un visiteur régulier du site AlsacreationS.com mais c'est mon premier appel à l'aide.
D'ordinaire je m'en sors avec les resssources que je trouve sur le net mais là je suis vraiment coincé.
Je développe un thème Wordpress pour le site d'un théâtre (www.theatredurance.fr) et je n'arrive pas à annuler la propriété background-color sur les liens entourant mes images.

Quand on insère une miniature dans un article avec un lien vers l'image taille réelle, celle-ci se place dans une balise <a href...></a> classique et les éventuelles classes permettant de styler l'image se placent automatiquement dans la balise img.
Or tous mes liens survolés sont stylés avec un background-color qui apparaît aussi sous l'image! Je voudrais trouver une solution qui éviterait à mon client de devoir ajouter à la main une classe spéciale pour ces liens chaque fois qu'il insère une image.
Mais comment annuler cette propriété sachant que rien ne distingue ce lien d'un autre lien à part le fait qu'il contient une image et qu'il possède un attribut rel="lightbox[XXX]"?

Quelqu'un aurait un idée?
Par avance merci.

PS: j'ai essayé d'utiliser le sélecteur d'attribut a[rel|=ligthbox] mais sans succès...
Modifié par Ixels (15 Jun 2010 - 16:42)

Bonjour

j'ai testé sur cette page ceci :

a:hover img{
background-color:#fff ;
}
img{
margin-bottom:0px ;
padding-bottom:20px ;
}

J'ai remarqué qu'en supprimant le margin de tes images, le rouge disparaissait (il doit être caché derrière). Du coup, au lieu d'un margin, je leur ai appliqué un padding tu as visuellement le même résultat.

Solution bricolage à tester sur le reste du site en attendant que quelqu'un trouve mieux

en théorie, les sélecteurs CSS sont là pour ça, tu pourrais indiquer un style différent pour des liens contenant une image.
En pratique ça n'est pas reconnu par tous les navigateurs, donc je pense que ta seule option va être de contourner le problème. Je n'ai pas ta page sous les yeux, mais tu pourrais essayer de cacher ton background-color, en modifiant le style des images de tes liens : leur rajouter une bordure de la couleur de ton fond de page par exemple ?

Merci pour vos réponses!

@jpvincent
Dommage pour les sélecteurs d'attributs, c'est une solution qui me séduisait bien mais je ne suis pas arrivé à l'appliquer, même sur les dernières version de Firefox et Safari.

@saiko_sama
J'ai essayé la solution que tu proposes et ça fonctionne. Je vais juste faire quelques tests sur tout le site : on ne sait jamais avec les multiples classes qu'ajoutent les plugins Wordpress...
Effectivement c'est du bricolage mais bon! Ca marche et c'est déjà bien.
J'avais essayé d'annuler la marge mais je n'avais pas pensé à "recouvrir" le lien avec le padding de l'image.

Re,

Il faut lire a:hover bien sûr

jpvincent a écrit :
en théorie, les sélecteurs CSS sont là pour ça, tu pourrais indiquer un style différent pour des liens contenant une image.
En pratique ça n'est pas reconnu par tous les navigateurs, donc je pense que ta seule option va être de contourner le problème. Je n'ai pas ta page sous les yeux, mais tu pourrais essayer de cacher ton background-color, en modifiant le style des images de tes liens : leur rajouter une bordure de la couleur de ton fond de page par exemple ?

Non, en théorie et en pratique c'est impossible pour une raison simple :
Les sélecteurs CSS ne parcourent l'arbre DOM qu'en transversal ou en top-down, il est impossible de faire du down-top (c'est à dire remonter vers les parents).
De plus la pseudo-classe contains() n'agit que sur les text-node, pas sur les éléments ("E:contains("foo") : an E element containing the substring "foo" in its textual contents") elle ne peut donc pas nous aider ici.

Il est donc impossible d'inspecter les enfants de ton lien et de remonter au niveau de ton lien pour changer ses styles.
Dans d'autres langages de selection comme xPath ou e4x c'est possible, mais pas avec les sélecteurs CSS.

MonsieurY a écrit :


Non, en théorie et en pratique c'est impossible pour une raison simple :
Les sélecteurs CSS ne parcourent l'arbre DOM qu'en transversal ou en top-down, il est impossible de faire du down-top (c'est à dire remonter vers les parents).
De plus la pseudo-classe contains() n'agit que sur les text-node, pas sur les éléments ("E:contains("foo") : an E element containing the substring "foo" in its textual contents") elle ne peut donc pas nous aider ici.

Il est donc impossible d'inspecter les enfants de ton lien et de remonter au niveau de ton lien pour changer ses styles.
Dans d'autres langages de selection comme xPath ou e4x c'est possible, mais pas avec les sélecteurs CSS.

Ce que tu dis m'intéresse:
J'utilise un plugin lightbox pour afficher les images en taille réelle avec l'effet que tout le monde connaît. J'ai vérifié et l'attribut rel="lightbox" est affecté au lien et pas à l'image.
Donc si j'ai bien suivi ce que tu expliques, je travaille au niveau du parent?

Pour la deuxième partie de ton explication, je vais être franc : j'ai rien compris mais je vais faire des recherches...

Ericf a écrit :
Salut,

Tu peux aussi ne pas spécifier de couleur :

a { background: transparent; }

En dernier recours c'est ce que je ferai...
Modifié par Ixels (14 Jun 2010 - 18:08)