鼠标悬停时的随机颜色

Question

我正在使用以下代码更改颜色。我的CSS中有：root {}。

我在每次重新加载页面时都有一个随机的阴影颜色，所以我几乎正确了。每次“悬停”是否有可能在每个项目上获得随机颜色？

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

:root {
    --shadowColor: blue;
}

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

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

Answer 1

使用onmouseover事件

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

function setColor() {
  document.documentElement.style.setProperty('--shadowColor', getColor());
}
setColor();

:root {
    --shadowColor: blue;
}

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

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

<div class="nav">
  <a href="#" onmouseover="setColor();"> Check the color item 1</a>
  <a href="#" onmouseover="setColor();"> Check the color item 2</a>
  <a href="#" onmouseover="setColor();"> Check the color item 3</a>
</div>