如何在悬停效果上随机分配颜色 [英] How to randomly assign a color on hover effect

问题描述

我从来没有见过这样的悬停效果，我试图理解它是如何实现的。您会注意到在此示例中，当用户将鼠标悬停在链接上时，链接所转换的颜色可以是任何一个5种颜色中的1种（在样式表中随机分配）。
如何创建这个悬停效果？

I've never seen a hover effect like this before, and I'm trying to understand how it's achieved. You'll notice in this example, that when a user hovers over a link, the color the link turns can be any one 1 of 5 colors that are assigned within the style sheet (see below) at random. How do you create this hover effect? Can it be done purely with 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; }

推荐答案

这里是我使用jQuery的简单方法。

Here's my simple approach to the problem, using jQuery.

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

You can see a working example here: 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];
}

这篇关于如何在悬停效果上随机分配颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！