鼠标悬停时的随机颜色

Question

我正在使用以下代码更改颜色。我的 CSS.

中有 :root{}

我在每次重新加载页面时都有一个随机的阴影颜色，所以我几乎是正确的。是否有可能在每个 '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 引用

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

鼠标悬停时的随机颜色

Random color on mouse-hover

javascript

css

random

colors

hover