How to show random color on hover in CSS?

Question

I have this CSS code that only displays one color (blue) when there\'s a mouse hover.

.MenuBox {
    transition: all 1.0s ease;
    -moz-border-radius:30px;
         


        

Answer 1

This javascript sets up an array of colors, then randomly selects one of them and applies it on hover. It then returns it to normal when you stop hovering.

var colors = ['blue','green','red','purple','yellow'];

$('.MenuBox').mouseenter(function() {
    var rand = colors[Math.floor(Math.random() * colors.length)];
    $(this).css('background-color', rand);
});

$('.MenuBox').mouseleave(function() {
    $(this).css('background-color', '');
});