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 ?

you will need javascript for that. You can use jquery or anyother javascript library — Panther, Jul 17 '15 at 05:16
As an aside, [it's very unlikely that you need to use the `-webkit-` or `-moz-` prefixes for `box-shadow`](http://caniuse.com/#feat=css-boxshadow). Might as well simplify things and remove them. — misterManSam, Jul 17 '15 at 05:56
OP note that whilst many people in this thread have suggested "you can use jQuery for this", jQuery is not required; you can use plain ol' JavaScript. jQuery itselt is at *least* 30kb when minified. I'd recommend against using jQuery if you want it just for this. — Dan, Jul 17 '15 at 07:30
People saying you *need* javascript for this are incorrect. You can't do this in pure CSS, but you can do it in a pre-compiler (LESS or SASS): http://stackoverflow.com/a/19870741/1017882 — , Jul 17 '15 at 09:24
@JayMee I suppose that would work for a different color on each page reload, but not on each hover. — jkavalik, Jul 17 '15 at 10:57

MrMadsen · Answer 1 · 2015-07-19T15:57:52.553

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/

@Lin I just updated my post - it is basically the same as it was but sets the correct css property - good luck! — MrMadsen, Jul 17 '15 at 05:39
Thanks, can I keep my css name as `.MenuBox` instead of changing it to `#random` ? I will have to do a major change on my script if it's changed to `#random`, which I'd like to avoid if possible — Lin, Jul 17 '15 at 05:43
Yes, keep whatever class names and ids you already have - just bind the mouseover event to .MenuBox instead of #random. — MrMadsen, Jul 17 '15 at 05:45
This doesn't work http://pastebin.com/MVmWWRsf where did I go wrong ? I want to keep it in one single file. — Lin, Jul 17 '15 at 06:13
@Lin I edited my post using your code and vanilla javascript (just javascript, no external libraries like jquery). Check out my newest fiddle and see if it gives you all the info you need to incorporate it into your site. Good luck! — MrMadsen, Jul 17 '15 at 06:44
In your example you're re-querying the same thing three times. In the other hand it's rare to see someone doing this with plain javascript. Use chaining or object version of `.css()`. — Gustavo Rodrigues, Jul 17 '15 at 12:31
@MrMadsen your code works but the colors don't disappear when my mouse goes away from the `div`s how should I fix this ? I want the colors to disappear when my mouse isn't hovering one of those `div`s — Lin, Jul 19 '15 at 15:50

score 2 · Answer 2 · answered Jul 17 '15 at 05:22

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

score 1 · Answer 3 · answered Jul 17 '15 at 05:22

1

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

answered Jul 17 '15 at 05:22

Arjun

67
4

3

Provide a bit of code that supports your answer... better for OP. – CoderNeji Jul 17 '15 at 05:29

score 1 · Answer 4 · answered Jul 17 '15 at 05:25

1

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.

answered Jul 17 '15 at 05:25

NicholasKyleHoffman

317
1
4
14

score 0 · Answer 5 · answered Jul 17 '15 at 05:20

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

this is an animation (not what OP asked for), and you don't need jQuery to solve OPs issue. it can be done in plain javascript. jQuery is a very heavy download for something as simple as this. — Dan, Jul 17 '15 at 07:27

score 0 · Answer 6 · edited Sep 23 '22 at 07:45

0

With scss you can use some functions right in the design file.

Take a look at my example from a project of mine:

    .logo{
        color: whitesmoke;
        font-size: 3rem;
        margin: 10px;

        &:hover{
            color: rgb(random(255), random(255), random(255));
            cursor: pointer;
        }
    }

Here is where I found the idea: codepen.io

edited Sep 23 '22 at 07:45

Zach Jensz

3,650
5
15
30

answered Sep 19 '22 at 17:33

DigitalGangster

1

How to show random color on hover in CSS?

6 Answers6

EDIT

Edit #2

Linked

Related