28172 sujets

CSS et mise en forme, CSS3

[Résolu] Appliquer un style à un élément et tous ses enfants

Bonjour à tous,
j'ai un petit souci pour appliquer un style à une chêne d'éléments.

En html j'ai un nav dans lequel j'ai mis un ul contenant 2 li. Chaque li contient un lien :

<nav>
  <ul class="listNav">
       <li class="listNav__item"><a class="listNav__item--heb" href="#">Hébergements</a></li>
        <li class="listNav__item"><a class="listNav__item--act" href="#">Activités</a></li>
   </ul>
</nav>


Ce que je souhaite faire c'est, au survol sur un li, lui appliquer une bordure bleue en haut et passer le texte du lien en bleu aussi. Pour la bordure c'est bon mais je n'arrive pas à mettre le texte en bleu. Si j'utilise "a:hover", le texte passe bien en bleu quand je le survole mais moi ce que je voudrais c'est que quand je passe la souris au-dessus du li sans pour autant survoler le texte, ce dernier passe tout de même en bleu.
Je sais pas si je suis clair, lol.
Voici mon css :

.listNav {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0;
    min-width: 250px;
}
.listNav__item {
    display: flex;
    padding: 0 20px;
    height: 40px;
    align-items: flex-end;
    justify-content: center;
}
.listNav__item:hover {
    border-top: solid 2px blue;
    color: blue;
}


Si quelqu'un a une idée ça m'aiderait car là je galère et je sens que c'est pas forcément un truc compliqué... Smiley biggrin
Modifié par Vahia (10 Oct 2021 - 17:54)
Salut,

vu que tu as mis le hover sur les li (sur la class que les li utilisent), c'est déjà bon, il suffit de rentrer sur la zone du li pour faire apparaître le trait bleu.

Éventuellement pour mieux voir le moment ou tu survoles tes li tu peux leur rajouter une couleur de background : https://jsfiddle.net/p0q7aeLg/

Edit : Pfiou faut que je me réveil, je réponds complètement à coté -_-

Edit 2 : En répondant à la question c'est mieux : https://jsfiddle.net/p0q7aeLg/1/

En gros tu as juste besoin de modifier le a sur un hover du li : 

.listNav__item:hover a {
    color: brown;
}

Modifié par Mathieuu (11 Oct 2021 - 09:35)
Meilleure solution
Au top merci !!!

En fait, j'avais essayé ".listNav__item:hover a" mais la bordure passait sur le lien au lieu d'être sur le li. En voyant ton code j'ai compris qu'il fallait l'ajouter EN PLUS de ".listNav_item:hover" et ensuite séparer les propriétés.
C'est évident quand on voit la solution mais je ne sais pas pourquoi ça ne m'est pas venu à l'esprit.

En tout cas encore une fois merci MAthieuu !!! Smiley cligne
J’ai rencontré les mêmes problèmes dernièrement et maintenant je peux le résoudre avec cette petite astuce. Merci beaucoup.
Sujet clos
Aller à