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

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是触发器时，您需要将element属性发送到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>