Conflit de règles hover

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 ^^

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.

Bonjour,

Citation:

---

Envoyé par two3d

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.

Citation:

---

Envoyé par two3d

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:

---

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 ...

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