如何在悬停效果上随机分配颜色

Question

我以前从未见过这样的悬停效果，我正在尝试了解它是如何实现的。您会注意到in this example,，当用户将鼠标悬停在链接上时，链接变为的颜色可以是随机分配在样式表（见下文）中的5 种颜色中的任何一种。 你如何创建这种悬停效果？可以纯粹用CSS来完成吗？

a:hover {
  color:#1ace84;
  text-decoration: none;
  padding-bottom: 2px;
  border: 0;
  background-image: none;
  }

a.green:hover { color: #1ace84; }
a.purple:hover { color: #a262c0; }
a.teal:hover { color: #4ac0aa; }
a.violet:hover { color: #8c78ba; }
a.pink:hover { color: #d529cd; }

Answer 1

由于引入了随机因素，我认为没有办法完全使用 CSS。

这是我使用 jQuery 解决问题的简单方法。

您可以在此处查看一个工作示例：http://jsfiddle.net/GNgjZ/1/

$(document).ready(function()
{
    $("a").hover(function(e)
    {
        var randomClass = getRandomClass();
        $(e.target).attr("class", randomClass);
    });
});

function getRandomClass()
{
    //Store available css classes
    var classes = new Array("green", "purple", "teal", "violet", "pink");

    //Get a random number from 0 to 4
    var randomNumber = Math.floor(Math.random()*5);

    return classes[randomNumber];
}

Answer 2

jQuery 代码的关键部分加载在页面的页脚中。

请关注作者对脚本的评论，或寻求author's permission重复使用。

/* 

  Code below this point is not licensed for reuse,
  please look and learn but don't steal

*/
var lastUsed;
function randomFrom(arr){
  var randomIndex = Math.floor(Math.random() * arr.length);
  lastUsed = arr[randomIndex];
  return lastUsed;
}
color_classes = ['green','purple','violet','teal','pink'];
function initLinks() {
  $('#wrap a').hover(function() {
    new_classes = color_classes.slice();

    var index = $.inArray(lastUsed, new_classes);
    new_classes.splice(index, 1);

    var classes = $(this).attr('class');
    if (classes) {
        classes.split(' ');
        $(classes).each(function(i, className) {
            var index = $.inArray(className, new_classes);
            if (index>0) {
                new_classes.splice(index, 1);
            }

        });
    }
    $(this).removeClass(color_classes.join(' ')).addClass(randomFrom(new_classes));
  }, function () {
  });
}