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 。