Issue on Path Fill Effect by Hover on Associated Link With Raphaël.js

Question

Can you please take a look at this demo and let me know why I am not able to add fill effect on hover on list?

<div id="canvas"></div>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<script>
window.onload = function () {
    var c = Raphael("canvas", 200, 200);
    var a = c.path("M50 50, L50,60, L60,60 L60,50 L50,50").attr({fill: "#000"});
    var b = c.path("M70 70, L70,80, L80,80 L80,70 L70,70").attr({fill: "#000"});
    var c = c.path("M90 90, L90,100, L100,100 L100,90 L90,90").attr({fill: "#000"});

};
jQuery('ul li').hover(function () {
    a.attr({fill: "#ccc" });
}, function () {
    a.attr({fill: "#000" });
});
</script>

Answer 1

window.onload is running asynchronously, so the variables a, b, c must be declared before

jQuery(document).ready(function(){

    var Draw = Raphael("canvas", 200, 200);

    var Letters = {
        a: Draw.path("M50 50, L50,60, L60,60 L60,50 L50,50").attr({fill: "#000"}),
        b: Draw.path("M70 70, L70,80, L80,80 L80,70 L70,70").attr({fill: "#000"}),
        c: Draw.path("M90 90, L90,100, L100,100 L100,90 L90,90").attr({fill: "#000"})
    }

    jQuery('ul li').each(function(){
        var letter = $(this).text().toLowerCase()
        , defaultColor = Letters[letter].attr("fill");

        $(this).hover(function(){
            Letters[letter].attr({fill: "#ccc" });
        }, function(){
            Letters[letter].attr({fill: defaultColor });
        });
    });

});

Update, based on list letters: Demo