Mouseover not working with velocity (no jQuery)

Question

I can't seem to get the effect working. I know it can be done with css transitions/keyframes, but I'd prefer it in Velocity. Other effects work, and I'm using the same syntax, so I'm at a loss for what's causing this. I tried iterating through the document.getElementsByClass('menu') inside the function too, though Velocity does that by itself as far as I know. I also tried testing with just a single element id instead of a class. Nothing worked.

When I used the HTML onmouseover tag, however, I kept getting reference errors - function not defined.

var varb = document.getElementsByClassName('menu');
for (var i = 0; i < varb.length; i++) {
  varb[i].addEventListener("mouseover", menuHover);
}

function menuHover() {
  Velocity(varb, {
    border: "1px",
    border: "blue"
  }, {
    duration: 500
  });
}

#navContainer {
  display: flex;
  justify-content: center;
  width: 60%;
  justify-content: space-around;
  align-items: center;
}

.menu {
  display: flex;
  font-size: 0.77rem;
  font-weight: bold;
  width: 16%;
  margin: 0 0.2rem 0 0.2rem;
  height: 2rem;
  justify-content: center;
  line-height: 2rem;
  font-family: Arial Black, sans-serif;
}

<nav id="navContainer">
  <div class="menu">HOME</div>
  <div class="menu">GALLERY</div>
  <div class="menu">ACTIVITIES</div>
  <div class="menu">ABOUT US</div>
  <div class="menu">PRICE</div>
  <div class="menu">CONTACT</div>
</nav>