如何具有多种链接悬停颜色,每个悬停都不同?

问题描述 投票:1回答:1

我想知道使链接的悬停状态成为5种不同的预选颜色之一的最佳和最简单的方法,并且每当您滚开然后重新打开时,它都会改变。

即有一个指向“联系人”的黑色链接,如果将鼠标悬停在其上方,它将变为蓝色。删除光标,然后将其返回到链接上,现在变成红色,依此类推。

我以为js是最好的方法,但是我还不是很熟练。

如果它是类似的概念,我也想知道如何对div进行上述操作(因为我可能想对图像或类似的东西进行处理。

感谢您的帮助!

javascript html css hover
1个回答
2
投票

这在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>
© www.soinside.com 2019 - 2024. All rights reserved.