jQuery each letter in div element, random colour from array on hover

Question

I'm trying to get each letter in a div element to change to a random colour from an array of colours. Then reset when the mouse moves off the div.

Here's what I've got so far. I think I'm pretty close, apart from the fact it doesn't actually work. This was built from a few different snippets on this site.

$(document).ready(function() {

    // COLOURS ARRAY
    var colours = Array("#ddd", "#333", "#999", "#bbb"), idx;

    $("DIV#header").hover(function(){

        $( $(this).text().split('')).each(function(index, character) {
            idx = Math.floor(Math.random() * colours.length);
            $(this).css("color", colours[idx]);
        });

    }, function() {
        $(this).css("color","#ddd");
    });

});

It doesn't produce any JS errors. The 2nd function of the hover seems to work but not the first. Any help would be gratefully received!

Answer 1

You can only add styles to elements, wrap each character in a <span> and style the span.

#header {color: #ddd}​

<div id="header">Some text here</div>​

$(document).ready(function() {

    // COLOURS ARRAY
    var colours = Array("#ddd", "#333", "#999", "#bbb"), idx;

    $("#header").hover(function(){
        var header = $(this); 
        var characters = header.text().split('');
        header.empty();  
        var content = '';
        for(var i = 0; i < characters.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
        }
        header.append(content);
    }, function() {
        $(this).find('span').contents().unwrap();
    });

});

http://jsfiddle.net/vVNRF/