Geckozone

Hello

Sur mon site, j'ai dans la classe siteInfo les paramètres CSS suivants :

#siteInfo img {
	border: 0;
	opacity: 0.5;
}

#siteInfo img:hover {
	opacity: 1;
}

Dans cette partie siteInfo j'ai des :

Code : Tout sélectionner

<a href...><img ...></a>

Bien sûr quand je passe sur l'image elle s'active, mais (et c'est normal) si je suis uniquement sur le texte du lien, l'image (contenue elle aussi dans le lien) reste en opacity .5
Y a-t-il un moyen de faire s'activer l'image quand je survole le texte ?

Merci

exemple ici en bas à gauche de la page

Tu peux ruser en encadrant ton lien et ton imag avec un span mais c'est pas top.
L'autre solution est de définir une classe pour tes <a> et dans la css ajouter l'image en background, résultat tout passera de 0.5 à 1.0.

olab a écrit :Tu peux ruser en encadrant ton lien et ton imag avec un span mais c'est pas top.

Comment ça ? Tu peux détailler je ne vois pas bien...

olab a écrit :L'autre solution est de définir une classe pour tes <a> et dans la css ajouter l'image en background, résultat tout passera de 0.5 à 1.0.

Hum... ça irait si j'avais à chaque fois la même image mais là j'ai 3 liens, 3 images différentes donc ça m'obligerait à définir 3 classes... pas très optimisé

Merci

Est-ce que çà te conviendrait ?

Code : Tout sélectionner

#siteInfo img {
   border: 0;
   opacity: 0.5;
}

#siteInfo img:hover {
   opacity: 1;
}

#siteInfo a:hover img {
   opacity: 1;
}

Code : Tout sélectionner

<div id="siteInfo "><a href...><img ...>bla-bla</a></div>

martin a écrit :Est-ce que çà te conviendrait ?
[...]

C'est exactement ce que je voulais, et c'est ultra simple. Parfait !
Merci beaucoup

Dans ce cas, on peut simplifier:

Code : Tout sélectionner

#siteInfo img {
   border: 0;
   opacity: 0.5;
}

#siteInfo a:hover img {
   opacity: 1;
}

Exact, merci !

Geckozone

Passer une image en opacity 1 en survolant un texte

Passer une image en opacity 1 en survolant un texte