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;
    -webkit-border-radius:30px;
    border-radius:30px;
    border: #solid 10px #000;
    background-color: rgba(255,255,255,0.5);
    width:auto;
    height:auto;
    margin-left: auto ;
    margin-right: auto ;
    padding:10px;
    display: inline-block;
}
.MenuBox:hover{
    transition: all 1.0s ease;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
    -moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 255, 0.67);
    box-shadow:         0px 0px 30px 0px rgba(0, 0, 255, 0.67);
}
.MenuBox:last-of-type:hover{

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
    -moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 255, 0.67);
    box-shadow:         0px 0px 30px 0px rgba(0, 0, 255, 0.67);
} 

I want to show a random color every time there's a mouse hover on that div how do I do that? I don't think it's possible to use CSS only, sorry for the dumb question. I'm still learning about programming languages.

Update:

I don't want to change the background-color but I want to change the color in:

-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 255, 0.67);
box-shadow:         0px 0px 30px 0px rgba(0, 0, 255, 0.67);

How do I do that ?

Answer 1

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 2

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