Changing to a random (shadow) color on hover - using Javascript/Jquery and CSS

Currently I am using the following code to change the shadow color. I use a :root{} in my CSS, which is linked with my Javascript file.

I get a random shadow color on each reload of the page, so I almost got it right.

Is it possible to get a random color on each item with every 'hover'?

JS goes as followed

function getColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

document.documentElement.style.setProperty('--shadowColor', getColor());

The following is a small part of my CSS for referencing

:root {
    --shadowColor: blue;
}

.nav a:hover {
    color: white;
    text-decoration: ;
    background-size: 1px 50px;

    text-shadow: -2px 0px var(--shadowColor);
}