28172 sujets

CSS et mise en forme, CSS3

Bonjour,
pour mettre une légère transparence sur mes image j'ai mis dans mon css :
a img {
opacity: 0.8;
}
a:hover img {
opacity: 1.0;
}

le Hic ! c'est que sa s'applique a toutes les images avec un lien. Du coup j'ai transformé mon css et j'ai fais :

.trans a{
opacity: 0.8;
}
.trans a:hover{
opacity: 1.0;
}

et dans mon html je fais :
	<a href="monlien" target="_blank"><img src="/images/monimg.png" alt="tada" class="trans"/></a>


mais sa ne fonctionne pas.

Ou est ce que je me trompe ?

Merci
le hover juste sur les class, enlève le a Smiley cligne

EDIT: comme suit:


.trans{
opacity: 0.8;
}

.trans:hover{
opacity: 1.0;


Ce que toi tu avais écrit correspondait à un lien se trouvant dans une div de class trans en fait.
Modifié par jmlapam (07 Nov 2011 - 22:04)
Bonsoir

Le css s'applique dans le meme ordre que les balises donc dans ton exemple, ça nous donne:
a img .trans {.....}
jmlapam a écrit :
le hover juste sur les class, enlève le a Smiley cligne

EDIT: comme suit:


.trans{
opacity: 0.8;
}

.trans:hover{
opacity: 1.0;


Ce que toi tu avais écrit correspondait à un lien se trouvant dans une div de class trans en fait.


Je proposerais plutôt çà, pour IE :


a .trans{
opacity: 0.8;
}

a:hover .trans {
opacity: 1.0;
mob a écrit :
Je proposerais plutôt çà, pour IE

IE7+ gère très bien la pseudo-classe :hover sur un élément autre que A.
C'est IE6 (paix à son âme) qui ne gérait :hover que sur les liens.

En passant, opacity n'est compris qu'à partir d'IE9. Ce serait assez cocasse d'adapter un sélecteur pour être compatible IE6 alors que le style à appliquer n'est compris que par IE9. Smiley lol
C'est IE7 ? J'ai toujours pensé que c'était plus récent que çà.. C'est une bonne chose ! Smiley smile

Et j'avoue, j'ai pas pensé à opacity sur le coup !
Modifié par mob (08 Nov 2011 - 12:32)
mob a écrit :


Je proposerais plutôt çà, pour IE :


t'es sûr?
Modifié par jmlapam (08 Nov 2011 - 15:08)
jmlapam a écrit :
Ce que toi tu avais écrit correspondait à un lien se trouvant dans une div de class trans en fait.

Plus exactement : un lien descendant d'un élément ayant pour classe trans. Smiley cligne
C'est ce qu'a précisé fvsch, la pseudo-classe :hover ne marchait que sur les éléments a pour IE6. Et dans tous les cas, opacity n'est pris en compte qu'à partir d'IE9.
Modifié par mob (08 Nov 2011 - 16:16)
jmlapam a écrit :
Hein?

Bah un filtre DirectX appelé dans IE 6-8 avec un code CSS non-standard, ça n'est pas un support de la propriété CSS3 opacity telle que définie dans la spec CSS Color Module Level 3. Donc non, IE 6-8 ne supportent pas opacity.

Par ailleurs le filtre DirectX en question peut être utile pour obtenir un rendu proche dans IE 6-8, mais il y a quelques problèmes liés, notamment:
- nécessité d'acitiver le hasLayout (ce qui peut poser quantité de problèmes... ou en corriger d'autres plus ou moins aléatoirement... dans IE 6-7);
- bugs graphiques bien moches quand on a plusieurs éléments translucides (filtre d'opacité sur un élément qui a un PNG-32 en image de fond ou comme contenu, par exemple);
- bugs de rendu du texte (lissage désactivé) lors de l'activation du filtre d'opacité.

Donc à utiliser avec des pincettes.