[Résolu] Problème au survol sur ::after

Bonjour,

Je vais essayer d'exposer mon problème le plus clairement possible: sur un menu en liste, j'ai rajouté sur chaque <li> un pseudo élément ::after qui s'affiche uniquement au survol. Deux problèmes se sont alors posés:
- Le lien en dessous doit toujours être cliquable --->j'ai trouvé une solution mais le deuxième problème s'est greffé: j'aurais voulu appliquer un background de couleur differente sur mes ::after, et là, il ne prennent que la même partout....

Pour l'exemple : https://jsfiddle.net/#&togetherjs=ug1bv2G0xb

Bonjour, le lien ne fonctionne pas

Aïe, j'ai dû louper un truc sur le lien. Voici mon code

	
<div id="second-menu">
		<ul>
			<li><a href="#">Adhésifs</a></li>
			<li><a href="#">Bâches</a></li>
			<li><a href="#">Panneaux</a></li>
			<li><a href="#">Déco</a></li>
		</ul>
	</div>

#second-menu{
  box-shadow: 0 1px 5px #333;
}

#second-menu a{
  display: block;
  width: 100%;
}

#second-menu li{
  list-style: none;
  flex:1 1 auto;
  padding:15px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#second-menu li:nth-child(-n+3) {
  border-right: 1px solid #f2f2f2;
}

#second-menu ul{
  display: flex;
  font-size: 1.5em;
  padding:0;
  background-color:#333;
}

#second-menu li a:link, #second-menu li a:visited, #second-menu li{
  text-decoration: none;
  color: #f2f2f2;
}

#second-menu a::after{
  pointer-events: all;
}

#second-menu li:hover a{
  color:white ;
  text-shadow: 1px 1px 4px #333;
}

#second-menu a:nth-child(odd)::after{
  content: "";
  position: absolute;
  width: 100%;
  left:0;
  top:71px;
  height: 71px;
  background: rgba(4,0,255,0.3);
  transition: all 0.3s ease-in-out;
}

#second-menu a:nth-child(even)::after{
  background: rgba(97,217,182,0.3) ;
  content: "";
  position: absolute;
  width: 100%;
  left:0;
  top:71px;
  height: 71px;
  transition: all 0.3s ease-in-out;
}


 #second-menu a:hover::after{
  top:0;
}

Modifié par Shupps (27 Feb 2019 - 13:38)

Salut,

En fait sur ton fiddle tu as activé la modification en collaboration et ca fait tout péter chez moi. Si je quitte ce mode le code s'affiche bien.

Pour revenir au soucis, ca revient a cibler chaque <li> individuellement donc plusieurs solutions. Tu peux les sélectionner avec nth-child :

#second-menu li:nth-child(1) { background-color: red; }
#second-menu li:nth-child(2) { background-color: blue; }
#second-menu li:nth-child(3) { background-color: pink; }
#second-menu li:nth-child(4) { background-color: yellow; }

avec un sélecteur d'adjacence (moins propre) :

#second-menu li { background-color: red; }
#second-menu li + li { background-color: blue; }
#second-menu li + li + li { background-color: pink; }
#second-menu li + li + li + li { background-color: yellow; }

Ou encore (et j'ai gardé le meilleur pour la fin) donner une classe spécifique à chaque menu et c'est ça le plus propre :

<ul>
	<li class="menu-adhesifs"><a href="#">Adhésifs</a></li>
	<li class="menu-baches"><a href="#">Bâches</a></li>
	<li class="menu-panneaux"><a href="#">Panneaux</a></li>
	<li class="menu-deco"><a href="#">Déco</a></li>
</ul>

.menu-adhesifs { background-color: blue; }
.menu-baches { background-color: pink; }
.menu-panneaux { background-color: yellow; }
.menu-deco{ background-color: yellow; }

En suite si j'ai bien compris, ce que fait ton after c'est juste apparaitre un background ? Dans ce cas j'aurais utilisé box-shadow c'est vachement plus simple et tu t’embête pas avec les problème de clique que t'as eu.... https://jsfiddle.net/undless/da482muo/

Merci _Laurent ! Voulant faire compliqué, suis passé au-dessus du box-shadow...
Une bonne chose de faite, résolu !