Random color on mouse-hover

I am using the following code to change the color. I have :root{} in my CSS.

I have 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:

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());

CSS for referencing

:root {
    --shadowColor: blue;
}

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

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