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 () {