I work on another guy's code, and I try to change the table cell background color when mouse over the cell, and change back to the original background color when mouse leave. I use the following code:

var bgcolor=$(".cell-el").css("background-color")

$(".cell-el").hover(
       function(){
         $(this).css("background-color", "#3c3c36")}, //mouse enter, bg-color change
       function(){
         $(this).css("background-color", bgcolor) // mouse leave, bg-color change back
 })

Things are working fine, EXCEPT that when mouse first time enter the cell, the cell background color is not changed to "#3c3c36", but when mouse leave the cell after first entering and enter in the cell again, the cell's background color changed to "#3c3c36".

That's the cell color never change for mouse first enter, after that, everything is working great. What's could be the cause of this problem?