我以前从未见过像这样的悬停效果,而我正在努力了解它是如何实现的.您会注意到
in this example,,当用户将鼠标悬停在链接上时,链接所转换的颜色可以是随机选择在样式表(见下文)中的5种颜色中的任何一种颜色.
你如何创建这种悬停效果？它可以纯粹用CSS完成吗？
你如何创建这种悬停效果？它可以纯粹用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的方法.
你可以在这里看到一个有效的例子：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];
}
