OVH Cloud OVH Cloud

CSS héritage

1 réponse
Avatar
Samos
Bonjour =E0 tous,

voici le bout de code :

<a href=3D"#" id=3D"link"><span>TEXTE</span></a>

dans mon style "#link" j'ai une image de fond avec opacit=E9 100%
dans mon style "#link:hover" j'ai une image de fond avec opacit=E9 20%

dans mon style "#link span" j'ai une opacit=E9 20%
dans mon style "#link span:hover" j'ai une opacit=E9 100%

Mais voil=E0, lorsque je passe la souris sur mon #link:hover le
span:hover h=E9rite de l'opacit=E9, ce que =E9videmment je ne veux pas,
auriez vous une id=E9e ?

Merci d'avance !

Samos

1 réponse

Avatar
Florian Sinatra
Samos a écrit :
Bonjour à tous,

voici le bout de code :

<a href="#" id="link"><span>TEXTE</span></a>

dans mon style "#link" j'ai une image de fond avec opacité 100%
dans mon style "#link:hover" j'ai une image de fond avec opacité 20%

dans mon style "#link span" j'ai une opacité 20%
dans mon style "#link span:hover" j'ai une opacité 100%

Mais voilà, lorsque je passe la souris sur mon #link:hover le
span:hover hérite de l'opacité, ce que évidemment je ne veux pas,
auriez vous une idée ?

Merci d'avance !

Samos



Attention, pour les navigateurs modernes, il faut ajouter :link aux
classes ou IDs de liens, dans l'ordre :
:link
:visited
:hover (parfois :link:hover)
:active

;-)