Discussion :

[Bales]

Bonjour à tous et à toutes,

Je suis nouveau ici, je commence à apprendre HTML5 et CSS3 et je me heurte à un problème.

Sur la version mobile de ma page un lien renvoie vers une ancre plus bas, et il faudrait que ce lien change de couleur et soit souligné par un border-bottom à 10px du texte lorsque je scroll up pour revenir sur mon lien.
J'utilise donc la pseudo classe :focus sur mon élément. Cela fonctionne parce que je vois le texte changer de couleur et le border-bottom apparaitre lors du clic mais lorsque je reviens sur mon lien, ces modifications ont disparu. A noter que dans la version desktop, c'est un border-top qui apparait au survol par un :hover, chose qui doit disparaitre sur la version mobile, au profit du border-bottom.

Une idée de pourquoi ma bordure ne reste pas en place après avoir cliqué ?

pour info, voilà le code css utilisé :

Code :

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

1
2
3
4
5
  nav a:focus {
    border-bottom: solid var(--color1);
    padding-bottom: 10px;
    color: var(--color1);
  }

Merci d'avance pour votre aide !

[darkstar123456]

Bonjour,

:focus est l'état quand un élément possède le focus (souvent déclenché par un click).
Cet état n'est pas disponible pour tous les éléments d'une page web car du texte -par exemple- ne peut pas être focus et il ne peut y avoir qu'un seul focus à l'instant T sur une page.
Le focus est perdu dès qu'on click ailleurs (il n'y aura pas forcément de nouveau focus mais le focus d'avant est perdu)
Dans ce cas-ci, je doute donc qu'il soit utile de passer par l'état :focus.


De plus, en CSS, il est impossible de tenir compte de l'information du scroll directement.

Ce qu'il vous faut, c'est ajouter du javascript à votre page, qui pourra vous renseigner si l'utilisateur a scrollé (et dans quelle direction : haut ? bas ?); et en fonction de ces informations ajouter une classe à votre lien. Et enfin, ajouter du CSS à cette classe.

Voici un petit exemple vite fait : https://codepen.io/DarkStar123456/pe...z?editors=1111

[Bales]

Merci pour votre réponse, en fait je m'aperçois que c'est bien le fait de scroll up qui annule le focus.
Problème résolu, donc !

Merci beaucoup !