stormec56 stormec56 - 1 year ago 133
CSS Question

Random Hover Effects

How can you randomize hover effects?

For example:


p:hover {
background: yellow;

background: red;

Please note that the above is for-example only. The question is, how can you randomize hover effects, so it shows the
once in random order on the

There should not be any order, like for example: on first hover - one class is added, on second - another. It should be completely random.

Answer Source

Use the following function to get random colors and use mouseover event to change the background color.

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() {

Please check this Fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download