jQuery random color - set on hover not working

Question

I've got this piece of code, I'm generating a random color and converting it to HEX, then I want to set it as backgroundColor of the .ribbon a:hover span class:

<script type="text/javascript">
$(function() {

    var randomColor = Math.floor(Math.random()*16777215).toString(16);
    alert(randomColor);
    $(".ribbon a:hover span").css({

        backgroundColor: '#' + randomColor

    });



});
</script>

Here's my css:

.ribbon a:hover span {
    background: /*<?php printf( "#%06X\n", mt_rand( 0, 0xFFFFFF )); ?>*/ #FFF;
    margin-top:0;
}

It doesn't even alert my randomColor variable... I've put this script before the </body> tag...

Are you sure you're importing jQuery ? Have you errors in the console ? — Denys Séguret, Nov 23 '12 at 21:19
@mookamafoob jQuery calls this fonction as soon as the dom is ready. — Denys Séguret, Nov 23 '12 at 21:20
I tested with jQuery on jsfiddle and it works. Are you sure you're loading jQuery? http://jsfiddle.net/MCyY5/ — Jay Blanchard, Nov 23 '12 at 21:24
Oopsers. Meant because jQuery wasn't being loaded as well. Good times :) — gotohales, Nov 23 '12 at 21:24
possible duplicate of [Setting CSS pseudo-class rules from JavaScript](http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript) — Alexander, Nov 23 '12 at 21:26

Denys Séguret · Answer 1 · 2012-11-23T21:31:39.690

4

jQueryUI doesn't include jQuery : you still need to load it (before).

So you should replace

<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript"> google.load("jqueryui", "1.5.2"); </script>

with

<script src="http://www.google.com/jsapi"></script> <!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jquery", "1.5.2");
google.load("jqueryui", "1.5.2");
</script>

edited Nov 23 '12 at 21:31

answered Nov 23 '12 at 21:24

Denys Séguret

372,613
87
782
758

1

As an aside, you probably want a more recent version of jQuery than 1.5.2. Also, once OP fixes his jQuery loading problem, there's still the nonsense (to jQuery) selector `$(".ribbon a:hover span")`. – thirtydot Nov 23 '12 at 21:34
Hello, the imports worked! But now how do I set the background color of my class? – moritzg Nov 23 '12 at 21:44

freejosh · Accepted Answer · 2012-11-23T21:35:30.683

First, you'll have to load jQuery - the code you provided only loads jQuery UI.

<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
    google.load("jquery", "1.5.2");
    google.load("jqueryui", "1.5.2");
</script>

Second, you can't bind a function to the :hover selector like that, you need to use the jQuery function .hover:

<script type="text/javascript">
$(function() {


    $(".ribbon a").hover(function() {
        // change to random color on mouseover
        var randomColor = Math.floor(Math.random()*16777215).toString(16);
        alert(randomColor);
        $(this).find('span').css({
            backgroundColor: '#' + randomColor
        });
    }, function() {
        // change back to original color on mouseout
        $(this).find('span').css({
            backgroundColor: '#FFF'
        });
    });
});
</script>

Note op said that the `alert` never happens. He's dealing with something aside from what you suggest here. — Madbreaks, Nov 23 '12 at 21:28
Yes! This is EXACTLY what I wanted! You are my hero! THANK YOU SO MUCH! THANKS!!! — moritzg, Nov 23 '12 at 21:47

score 0 · Answer 3 · answered Nov 23 '12 at 21:32

Either you're not importing jQuery, or you have JS errors elsewhere in your code that is causing your script(s) as a whole to break. First, check your console for any errors. If that doesn't reveal anything, try changing your script to this:

<script type="text/javascript">
    $(function(){
        alert('jQuery is alive!');
    });
</script>

jQuery random color - set on hover not working

3 Answers3