Question

我以前从未见过像这样的悬停效果，而我正试图了解它是如何实现的。您会注意到in this example,当用户将鼠标悬停在链接上时，链接转换的颜色可以是 5种颜色中的任意一种，这些颜色在样式表中分配（见下文）at随机。你如何创建这种悬停效果？它可以纯粹用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 () {
  });
}

如何在悬停效果上随机指定颜色

2 个答案: