In jQuery, cannot use a hover function into an each function?

This is probably an easy question, but since I'm new to jQuery, I need someone to look at this code for me. So basically I want to change the css of the hover state of multiple anchor tags, I tried the following code b开发者_运维技巧ut it didn't work. What's wrong with that?

(".p-container a").each(function () {
    $(this).css({'text-shadow':'0 0 0.2px '+ colorArray[i]});
    $(this).hover(function() {
           $(this).css({'text-shadow':'0 0 2px '+ colorArray[i]});
    },function() {
           $(this).css({'text-shadow':'0 0 0.2px '+ colorArray[i]});
    });
    i++;
});

The code works without having the hover function, but I want to change the css of the hover state at the same time. Is anybody know how to do that?

Thanks KJ

What is you i? Is it the index of the .each()^DOC function?

(".p-container a").each(function (i, value) {
    $(this).css({'text-shadow':'0 0 0.2px '+ colorArray[i]});
    $(this).hover(function() {
           $(this).css({'text-shadow':'0 0 2px '+ colorArray[i]});
    },function() {
           $(this).css({'text-shadow':'0 0 0.2px '+ colorArray[i]});
    });
    i++;
});

If i is a problem so do colorArray. i could be a global variable. I think the problem is missing $

$(".p-container a").each(function () {