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

Question

I'm working on an hover effect for a menu which worked well while using ID's but I can't figure how to do the same with multiples classes.

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

Here is the demo : JSFiddle

Working with ID's:

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

Is there any reason you're JS'ing this rather than doing it via CSS? You can use pseudo content for the effect your Fiddle shows. — Mitya, Jul 22 '17 at 17:56
@Utkanos Yes it could do the work with a class added to the div on hover but I thought that I would need `onmouseout` because i'd like the underline to be still active if the mouse isn't on another link. — Léo Durand, Jul 22 '17 at 18:04

Marcogomesr · Accepted Answer · 2017-07-23T12:14:05.887

0

You need to send the element property to your textWidth() function when onmouseover is 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>

edited Jul 23 '17 at 12:14

answered Jul 23 '17 at 10:13

Marcogomesr

2,614
3
30
41

By any chance, do you know why `onmouseout` has a strange behaviour ? [JSFiddle](https://jsfiddle.net/Leshautsdurant/tgzvyjsw/) – Léo Durand Jul 23 '17 at 11:11
I noticed that but I wasn't sure what to do with it, when the onmouseout fired it sets the width to all the classes to 0px,,, and when you load the code you see some pink background because the class .underline has `width:5px;`... so you can remove it – Marcogomesr Jul 23 '17 at 11:20
I did get rid of the `width:5px` that I used at the beginning but still don't get why `onmouseout`is fired on the `link-menu` and not on the `wrap-menu`. – Léo Durand Jul 23 '17 at 11:26
change it to width:0;... `onmouseout ` is fired on link-menu because is set on the same div element..`
`...is that what you are asking?
– Marcogomesr Jul 23 '17 at 11:31
Well, I think it is what I did in this [JSFIddle](https://jsfiddle.net/Leshautsdurant/tgzvyjsw/) – Léo Durand Jul 23 '17 at 11:38
@LéoDurand so you want to see the animation in the whole background? – Marcogomesr Jul 23 '17 at 11:39
Well I was testing if i could keep the underline active even if the mouse isn't on the link. My final purpose is to toggle the hover and keep the last underline active. – Léo Durand Jul 23 '17 at 11:48
I just found this [JSFiddle](http://jsfiddle.net/Leshautsdurant/c2rLbzdm/) but it is in jQuery. – Léo Durand Jul 23 '17 at 11:56
Waouh awesome, it's perfect ! Thanks a lot Marco ! – Léo Durand Jul 23 '17 at 12:35

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

1 Answers1