Hover et Opacité

Bonsoir,

Je suis sous Html5.

Mon header, où se trouve le nav, est en opacité 0.4. Au passage de la souris (hover) je voudrais que le lien ait pour background #39A889, l'opacité en 1 et la couleur de police blanche.

Voici mon code html :

<header>
	<nav>
		<ul>
			<li><a href="index.html">Accueil</a></li>
			<li><a href="cv.html">CV</a></li>
			<li><a href="infographie.html">Infographie</a></li>
			<li><a href="sites.html">Sites Web</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
</header>

Et mon css :

header
{
	background-color: white;
	opacity : 0.4;
}

li a
{
	color : grey;
	opacity : 1;
}

nav li a:hover, nav li a:focus, nav li a:active 
{
	background-color: #39A889;
	opacity : 1;
	color : white;
}

J'espère que vous pourrez m'aider

Merci d'avance
Modifié par Lucie6 (12 Jul 2015 - 23:13)

Bonjour,

Le problème est que l'opacity du header recouvre tes liens. Tu dois donc faire ceci:

header
{
	background-color: white;
	opacity : 0.4;
}

li a
{
	color : grey;
	opacity : 1;
}

header:hover {
  opacity: 1;
}

nav li a:hover, nav li a:focus, nav li a:active 
{
	background-color: #39A889;
	color : white;
}

En gros, quand ta souris survole le header, son opacité revient à 1

Merci Docteurdread pour ta réponse mais ce n'était pas ce que je voulais. En mettant l'opacité en 1 en hover sur le header, le bloc devenait tout blanc au passage de la souris (logique) mais je voulais qu'il reste en opacité 0.4 et que le background des liens passe lui en opacité 1. (Compréhensible? )

Bref, merci Zelalsan c'est exactement ce qu'il me fallait !!! Je mets donc ce sujet en résolu.