Animation nav hover

Bonjour à tous, j'ai fait un menu et j'aimerais bien faire une animation qui ferait que lorsque l'on passe au dessus d'un des liens, une barre en dessous prenne sa taille et glisse jusqu'au dessous

const line = document.querySelector('.bars');
const links = document.querySelectorAll('li');

for ( i = 0; i < links.length; i++ ) {
  links[i].addEventListener('mouseover', function(){
   line.style.width = this.clientWidth + ' px';
   line.style.left = this.offsetLeft + ' px';
  });
}

J'ai fait ceci mais je n'ai rien de concluant. J'ai fait une erreur ?
Merci de votre aide !
Modifié par vzytoi (20 Jun 2020 - 17:25)

Et l'eau,

Sans le html et le css, on va pas très loin....

niuxe a écrit :
Et l'eau,

Sans le html et le css, on va pas très loin....

Coucou, effectivement, le voici ( j'ai pas mi tout le CSS mais l'important est là ).

<nav class="nav">
  <ul class="links">
    <a href="link1">HOME</a>
    <a href="link2">PROJECTS</a>
    <a href="link3">ABOUT</a>
    <a href="link4">CONTACT</a>
  </ul>
  <div class="line"></div>
</nav>

.links {
  font-family: sans-serif;
  a {
    margin: 0 20px;
    color: inherit;
    text-decoration: none;
  }
}

.line {
  background: #000;
  margin-top: -6px;
  height: 2px;
  position: relative;
  opacity: 0;
  // fixer la width et le left en javascript
}

const line = document.querySelector('.nav .line');
const links = document.querySelectorAll('.links a');

for ( i = 0; i < links.length; i++ ) {
  links[i].addEventListener('mouseover', function(){
   line.style.opacity = "1";
   line.style.width = this.clientWidth + ' px';
   line.style.left = this.offsetLeft + ' px';
  });
    links[i].addEventListener('mouseleave', function(){
      line.style.opacity = "0";
    });
}

J'avoue ne pas bien comprendre ce que tu essaies de faire. est ce que tu essaies de faire ceci ?
codepen
Modifié par niuxe (20 Jun 2020 - 18:46)

niuxe a écrit :
J'avoue ne pas bien comprendre ce que tu essaies de faire. est ce que tu essaies de faire ceci ?
codepen

Non en fait j'aimerais qu'une barre située sous le menu se balade de gauche à droite selon le lien sur lequel est la souris en se positionnant en dessous.

niuxe a écrit :
Regarde à nouveau le codepen. Il y a 2 types d'animations. Pour changer, tu remplaces k2000 par underscore.

&:hover:before{
      opacity: 1;
      animation: k2000 1s infinite;
    }

Pour underscore, il faudra que tu affines pour avoir quelque chose de plus potable. J'ai fait ça un peu à l'arrache.

Désolé de la réponse, tardive.
C'est exactement ça, merci beaucoup !
Passe une bonne journée

Moi même, j'ai pris connaissance tardivement. Hier j'ai été occupé. En tout cas, heurex que ça ait pu t'aider.