javascript - 随机悬停效果

Question

如何随机化悬停效果？

例如:

<p>test</p>

p:hover {
background: yellow;
}

p:hover:
background: red;
}

请注意以上仅供引用。问题是，如何随机化悬停效果，使其显示 background:yellow;和 background:red;在 onmouseover 上以随机顺序排列一次？

不应该有任何顺序，例如:第一次悬停 - 添加一个类，第二次 - 另一个。它应该是完全随机的。

Answer 1

使用以下函数获取随机颜色并使用鼠标悬停事件更改背景颜色。

function getRandomColor () {
 var letters = '0123456789ABCDEF'.split('');
 var color = '#';
 for (var i = 0; i < 6; i++) {
     color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
    }
})

$( "p" ).mouseover(function() {
$(this).css("background",getRandomColor());
});

请检查此 Fiddle 。