Discussion :

[Lexarino]

Bonjour à tous,

J'ai dû mal à obtenir le rendu désiré d'effet hover sur un lien.
Il s'agit d'une liste de liens <li><h3><a> mais il y a deux effets de survol qui sont en conflit : celui du bloc <li> et celui du bloc lien <a>.

Démonstration

L'idée c'est que lorsque je survole le bloc <li> (et pas que lors du survol de la balise <a>) le texte devienne blanc.
Dans ma démo, il l'est qu'au survol de la balise <a> et si je passe en dehors de cette balise le texte est jaune sur fond jaune, donc invisible.

Dois-je passer par du Jquery/Javascript ou une astuce CSS peut régler cela ?
Question alternative, est-il préférable de passer par des <button> ?

Un grand merci à vous ^^

[two3d]

Bonjour,

Je te conseil de travailler sur le :hover de la balise <a> seulement et mettre à cette balise avec un padding pour "gonfler" le lien, pour rendre les espaces autour plus grands.

Info : il est incorrect d'utiliser des <h3> dans une liste, les h1, h2,... sont réservés aux titres de page ou de <section>, et ne doivent pas servir pour grossir un texte, pour cela on utilise l'attribut CSS font-size.

[NoSmoking]

Bonjour,

Info : il est incorrect d'utiliser des <h3> dans une liste, les h1, h2,...

bien d'accord, les balises <hx> sont des balises sémantiques et ne doivent pas servir à la mise en forme surtout que tu la déstructures par derrière.

Je te conseil de travailler sur le :hover de la balise <a> ...

Effectivement, si tenté que tu aies besoin de la liste <ul>, je mettrais &également le :hover sur les éléments <a> en les déclarant en display:block.

Le CSS suivant devrait suffire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.menuLigne {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menuLigne__item {
  display: inline-block;
}
.lien_jaune {
  display: block;
  padding: .5em 1em;
  text-decoration: none;
  line-height: 2;
  color: #FFDC72;
}

Pour ton menu il n'est pas inintéressant de lire cette discussion : Menu horizontal occupant ...

[Lexarino]

Un grand merci les gars ! (désolé j'avais pas pris le temps de vous remercier)

Effectivement j'ai replacé mon :hover seulement sur la balise <a> et le tour est joué.
Sur ce coup là j'ai pas été "le pingouin qui glisse le plus loin" !

J'avais jamais pris conscience qu'il ne fallait pas mettre des balises <hx> dans des listes.
J'ai un menu <nav> pour le header sur cette page mais j'imagine que ça ne pose pas problème d'en avoir plusieurs.

Encore merci