Get one class in function with index for hover underlined menu

Question

I am working on a hover effect for a menu that works well when using IDs, but I cannot figure out how to do the same with classes with multiple values.

The function is to get the width of the text and apply underline when you hover with the same length. It would be nice if I could do this without jQuery.

Here is a demo: JSFiddle

Work with identifiers:

function textWidth() {

    var TextDiv = document.getElementById("link-menu");
    var txtWidth = (TextDiv.clientWidth + 1);
    document.getElementById("underline").style.width = txtWidth + 'px';
}
function textWidthInitial() {

    document.getElementById("underline").style.width = '0px';
}

Attempts with classes # 1:

function textWidth() {


    var linkDiv = document.getElementsByClassName("link-menu");
    var underlineDiv = document.getElementsByClassName("underline");
    var i;
    for (i = 0; i < linkDiv.length; i++) {
        var txtWidth = (linkDiv[i].clientWidth + 1);
        underlineDiv[i].style.width = txtWidth + 'px';
    }
}

Attempts with classes # 2:

function textWidth() {

    var clsLinkMenu = document.querySelectorAll('.underline, .link-menu');
    var i;
    for (i = 0; i < clsLinkMenu.length; i++) {
        var txtWidth = (clsLinkMenu[i].clientWidth + 1);
        document.getElementsByClassName("link-menu")[i].style.width = txtWidth + 'px';
        document.getElementsByClassName("underline")[i].style.width = txtWidth + 'px';
    }
}

Answer 1

You need to send the element property to the textWidth () function when onmouseover is a trigger

function textWidth(el) {
  
  var underlineDiv = document.getElementsByClassName("underline");
  
 
    for (i = 0; i < underlineDiv.length; i++) {
        var txtWidth = (underlineDiv[i].clientWidth + 1);
        underlineDiv[i].style.width = '0px';
    }
    

    var i;
    for (i = 0; i < el.innerHTML.length; i++) {
        el.nextSibling.nextElementSibling.style.width = el.clientWidth + 'px';
    
    }
    
    el.className+= ' active'; 
    
}

body {
  margin: 0;
  padding: 0;
}
.button-menu {
  padding: 25px 0 0 40px;
}
.link-menu {
  font-family: Maison Neue, sans-serif;
  position: absolute;
  height: auto;
  white-space: nowrap;
  z-index: 40;
}

.underline {
  background: pink;
  width: 0;
  height: 20px;
  position: relative;
  opacity: 0.5;
  transition: 0.5s ease;
  z-index: 30;
}

<div class="button-menu">
  <div class="link-menu" onmouseover="textWidth(this)">
    Playground
  </div>
  <div class="underline"></div>
</div>

<div class="button-menu">
  <div class="link-menu" onmouseover="textWidth(this)">
    Dynamikaj
  </div>
  <div class="underline"></div>
</div>

<div class="button-menu">
  <div class="link-menu" onmouseover="textWidth(this)">
    Sérigraphie
  </div>
  <div class="underline"></div>
</div>

Run codeHide result