鼠标悬停随机颜色答案

【问题标题】：Random color on mouse-hover鼠标悬停随机颜色
【发布时间】：2020-01-28 14:02:47
【问题描述】：

我正在使用以下代码来更改颜色。我的 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);
}

【问题讨论】：

虽然我理解你的问题：你到底为什么要这样做？这是一个可用性噩梦，甚至作为一个噱头，至少可以说非常烦人。这肯定是可能的。但请向我们展示您的尝试、出了什么问题、您从中学到了什么以及您遇到了困难。 Stack Overflow 不是代码编写服务。
@herrbischoff 也许这不是用于实际/生产用途，而是为了更好地理解如何通过 JavaScript 操作自定义变量。

标签： javascript css random colors hover

【解决方案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>

【讨论】：

感谢您的回答和更改Deepu！对此，我真的非常感激。是否可以通过js文件改变效果？还是只能在 html 行上添加 onmouseover 。（我试图添加一个事件监听器，但我被困在最后几行。）如果不可能，我仍然感谢你的努力！
@Rensrups 我添加了一个新的解决方案。检查显示代码sn-p链接
谢谢，我知道现在是如何工作的，非常感谢您的帮助。谢谢