javascript - Mouse event firing but not performing function -

i'm trying make simple drawing program using grid made of boxes class .box. want boxes gradually darken on each pass of mouse altering opacity.

   $('.box').mouseenter(function() {       var currentop = parseint($(this).css('opacity'));       $(this).css('opacity', currrentop + .1);    });

the event fires once , changes opacity 0 .1, won't continue increase opacity on subsequent mouse passes.

i'm able desired results using code:

   $('.box').mouseenter(function() {        $(this).css('opacity', '+=1');    });

could tell me why first attempt won't work? here jsfiddle whole code. thanks!

the result of parseint() integer, 0, in case. want use parsefloat() instead.

change:

var curop = parseint($(this).css('opacity'), 10);

to:

var curop = parsefloat($(this).css('opacity'), 10);

WINAPI