CODEWITHSUNDEEP
javascriptjqueryhtmlcss
stormec56
stormec56

Reputation: 162

Random Hover Effects

How can you randomize hover effects?

For example:

<p>test</p>

p:hover {
background: yellow;
}

p:hover:
background: red;
}

Please note that the above is for-example only. The question is, how can you randomize hover effects, so it shows the background:yellow; and background:red; once in random order on the onmouseover?

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

Upvotes: 2

Views: 1873

Answers (4)

Aneesh Sivaraman
Aneesh Sivaraman

Reputation: 931

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() {
$(this).css("background",getRandomColor());
});

Please check this Fiddle.

Upvotes: 4

Haresh Vidja
Haresh Vidja

Reputation: 8496

$(document).ready(function(){

$("p[data-random]").mouseover(function(){
	max_value=5;
	random_value= Math.floor((Math.random() * max_value) + 1);
	$(this).attr("data-random",random_value);
});
})
p[data-random]{
	padding: 10px;
    border:1px solid black;
}

p[data-random]:hover {
	cursor: pointer
}

p[data-random="1"]:hover {
	background: yellow;
}
p[data-random="2"]:hover {
	background: red;
}
p[data-random="3"]:hover {
	background: black;
}
p[data-random="4"]:hover {
	background: white;
}
p[data-random="5"]:hover {
	background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-random="1">Hello</p>

This is best way to do random effect on background, here I have considered 5 colors for random effect.

Upvotes: 0

HiDeoo
HiDeoo

Reputation: 10563

You could add a random class to the element on hover and remove it when the hover event is done.

If you have the following CSS:

.yellow {
  background: yellow;
}

.red {
  background: red;
}

You could use the follow jQuery code example:

// Declare all classes that can be used in the random selection
var classes = ['yellow', 'red'];

$("p").hover(
  function() {
    // Select a random class
    var randomClass = classes[Math.floor(Math.random() * classes.length)];

    $(this).addClass(randomClass);
  }, function() {
    $(this).removeClass();
  }
);

You can check an example on this Fiddle.

The random selection is made on the classes array using the Math.random() function.

Upvotes: 0

Nigrimmist
Nigrimmist

Reputation: 12376

You should play with setting different classes using javascript.

For example something like that (jquery) : 

 var randomClasses = ['class1','class2','class3'];
$('p').mouseover(function(){
 $(this).toggleClass(function() {
   var randomColor = randomClasses[getRandomInt(0,randomClasses.length-1)];
   return randomColor;
 });    
})


function getRandomInt(min, max)
{
   return Math.floor(Math.random() * (max - min + 1)) + min;
}

Upvotes: -1

Related Questions