在带有下划线悬停菜单的索引的函数中获取一个 class

Question

我正在为一个菜单制作悬停效果，它在使用 ID 时效果很好，但我不知道如何对多个菜单做同样的事情类。

功能是获取文本的宽度，并在鼠标悬停时应用相同长度的下划线。如果我能在没有 jQuery.

的情况下做到这一点就好了

这是演示：JSFiddle

使用 ID：

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';
}

尝试类 #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';
    }
}

尝试类 #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

当 onmouseover 被触发时，您需要将元素属性发送到您的 textWidth() 函数

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>

在带有下划线悬停菜单的索引的函数中获取一个 class

Get one class in a function with index for a menu with underline hover

javascript

indexof

getelementsbyclassname