悬停时JS随机颜色变化答案

【问题标题】：JS RandomColor Change on hover悬停时JS随机颜色变化
【发布时间】：2021-10-18 19:34:52
【问题描述】：

我想在悬停<a class="c-link"时随机更改颜色但它不起作用，我想知道我在这里做错了什么。

<!doctype html>
<html>

<script>
  window.onload = function() {
    function randomColor() {
      let color = [];
      for (let i = 0; i < 3; i++) {
        color.push(Math.floor(Math.random() * 256));
      }
      return 'rgb(' + color.join(', ') + ')';
    }

    document.querySelector('c-link').addEventListener("mouseover", function() {
      document.a.style.fontcolor = randomColor();
    });
  }
</script>
</head>

<body>

  <div class="c-text__layer">
    <div class="c-text">Lorem ipsum dolor sit amet consetetur,<br> sadipscing elitr,
      <a class="c-link" href="https://stackoverflow.com/"> sit amet dolor</a></div>
  </div>
</body>

</html>

【问题讨论】：

如果我的回答解决了您的问题，请将其标记为“已接受”。否则，请告诉我。

标签： javascript html colors

【解决方案1】：

您需要在查询选择器中使用. 指定类。因此querySelector('.c-link')。

您不能只调用document.a，因为a 不是document 对象的属性或方法。

此外，还有style.color 和style.font，但没有fontcolor。

改为使用另一个选择器：querySelector('a') 来选择文档中的所有锚点。但是，这将影响每个链接。如果您只希望它适用于一个或几个元素，您可以使用 data-attribute、id 甚至其他 CSS 类，而不是在 querySelector 中定位 a。

您还可以阅读 MDN 以了解有关 JS 和 Web 的更多信息。

<!doctype html>
<html>
<script>
  window.onload = function() {
    function randomColor() {
      let color = [];
      for (let i = 0; i < 3; i++) {
        color.push(Math.floor(Math.random() * 256));
      }
      return 'rgb(' + color.join(', ') + ')';
    }

    document.querySelector('.c-link').addEventListener("mouseover", function() {
      document.querySelector('a').style.color = randomColor();
    });
  }
</script>
</head>

<body>

  <div class="c-text__layer">
    <div class="c-text">Lorem ipsum dolor sit amet consetetur,<br> sadipscing elitr,
      <a class="c-link" href="https://stackoverflow.com/"> sit amet dolor</a></div>
  </div>
</body>

</html>

【讨论】：