如何有多个链接悬停颜色，每个悬停不同？答案

【问题标题】：How to have multiple link hover colors, different each rollover?如何有多个链接悬停颜色，每个悬停不同？
【发布时间】：2020-04-11 01:21:43
【问题描述】：

我想知道将链接的悬停状态设置为 5 种不同的预选颜色之一的最佳和最简单的方法，并且每次滚动然后重新打开时，它都会发生变化。

即“联系人”有一个黑色链接，如果将光标悬停在它上面，它就会变成蓝色。移除光标，然后将其返回到链接上，现在它是红色的，等等。

我假设 js 是最好的方法，但我还不是很熟练。

如果是类似的概念，我也想知道如何使用 div 执行上述操作（因为我可能想对图像或类似的东西进行操作）。

感谢您的帮助！

【问题讨论】：

标签： javascript html css hover

【解决方案1】：

这在 JavaScript 中是可行的，请参见下面的示例。无论元素类型如何，相同的概念都适用。

const colors = ['blue', 'black', 'orange', 'green', 'purple', 'teal', 'pink'];

document.querySelectorAll('div')
  .forEach(div =>
  {
    div.addEventListener('mouseover', () => {
      div._originalColor = div.style.backgroundColor;
      div.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)]
    }, true);
    
    div.addEventListener('mouseout', () => {
      div.style.backgroundColor = div._originalColor;
    }, true);
  });

<div style="width: 300px; height: 200px; background-color: red; margin: 5px; display: inline-block;"></div>

<div style="width: 300px; height: 200px; background-color: red; margin: 5px; display: inline-block;"></div>

【讨论】：

这太好了，谢谢！有没有办法对颜色进行排序（即不随机化）以防止相同的悬停颜色出现两次？
可以使用链表数据结构来选择下一个颜色。