javascript - 鼠标悬停时的随机颜色

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>

不在 HTML 行上使用 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();

document.body.addEventListener('mouseover', function (evt) {
if (evt.target.tagName === 'A') {
    setColor();
}
}, false);

: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="#" > Check the color item 1 </a>
  <a href="#" > Check the color item 2 </a>
  <a href="#" > Check the color item 3 </a>
</div>