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…

Answer 1

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>