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', '');
});

Answer 2

You could use jQuery to select the element you want to hover over and execute a function that generates random hex codes. Then set the div's color to what is generated.

Answer 3

Here is how I would do it with javascript and jquery (not required but simpler).

html:

<div id="random"></div>

javascript:

$('#random').on('mouseover',function() {
    var color = '#'+Math.floor(Math.random()*16777215).toString(16);
    var colorString = '0px 0px 30px 0px ' + color;
    $('#random').css('box-shadow',colorString);
    $('#random').css('-webkit-box-shadow',colorString);
    $('#random').css('-mox-box-shadow',colorString);
});

css:

#random {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

Here is the updated working fiddle: https://jsfiddle.net/6n0tk3a3/1/

EDIT

Here is the same thing using pure javascript - no jquery - and your provided class names and css.

First html:

<div class="MenuBox"></div>
<div class="MenuBox"></div>
<div class="MenuBox"></div>

Javascript:

var menuBoxes = document.getElementsByClassName('MenuBox');
for (var i = 0; i < menuBoxes.length; i++) {
    menuBoxes[i].onmouseover = function(e) {
        var color = '#'+Math.floor(Math.random()*16777215).toString(16);
        var colorString = '0px 0px 30px 0px ' + color;
        this.style['box-shadow'] = colorString;
        this.style['-webkit-box-shadow'] = colorString;
        this.style['-moz-box-shadow'] = colorString;
    }  
}

Since I used your css I won't post it. Here is the working fiddle: https://jsfiddle.net/6n0tk3a3/2/

In your comment you said you want them all in the same file. Though you can do this I would advise against it as it is usually considered bad practice. If you do decide to do it then make sure your javascript goes right before the closing body tag so that all the elements on the page are loaded before it tries to bind to any of them.

Edit #2

If you want the color to box shadow to disappear once your mouse is no longer hovering add this to the for loop:

menuBoxes[i].onmouseout = function(e) {
    this.style['box-shadow'] = "none";
    this.style['-webkit-box-shadow'] = "none";
    this.style['-moz-box-shadow'] = "none";
}

Here is a working fiddle: https://jsfiddle.net/6n0tk3a3/25/

Answer 4

i think you can achieve this using jquery or Javascript since you dont have these kinds of features with CSS

you can dynamically assign class names using jquery on each hover activity and append various colors to that class

Regards Arjun

Answer 5

I believe you will need jQuery to do this,

JS

function startAnimation(o) {
    var hue = 'rgb('
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ')';
    $(o.currentTarget).animate( { color: hue }, 500, function() {
        startAnimation(o);
    });
}

$(document).ready(function() {
    $('a').hover(
        startAnimation,
        function() {
            $(this).stop().animate( { color: '#000' }, 500);
        }
    );
});