在具有下划線懸停的菜單的索引的函數中獲取一個類

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>