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

概述我以前从未见过像这样的悬停效果,而我正在努力了解它是如何实现的.您会注意到 in this example,,当用户将鼠标悬停在链接上时,链接所转换的颜色可以是随机选择在样式表(见下文)中的5种颜色中的任何一种颜色. 你如何创建这种悬停效果？它可以纯粹用CSS完成吗？ a:hover { color:#1ace84; text-decoration: none; padding-bot 我以前从未见过像这样的悬停效果,而我正在努力了解它是如何实现的.您会注意到 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; }

解决方法 由于引入了随机因素,我认为没有一种纯粹使用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];}

总结

以上是内存溢出为你收集整理的html – 如何在悬停效果上随机指定颜色全部内容，希望文章能够帮你解决html – 如何在悬停效果上随机指定颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。