div in front of another resets jQuery hover animation. how to prevent this?

Question

hello.

i have an animate effect applied to 4 divs in order to create a blinds effect: when you hover over the first box it grows , the other 3 shrink and when you "mouseout" all 4 return to 25% of the total height.

i want to insert a nested div inside each box (in front, actually with absolute positioning) in order to present some text and links, but every time the mouse hovers over this new div, the animation resets (the mouseout event runs).

how can i make the nested div invisible to the animation? or include it such way that it is invisible to the animation code but the urls work properly?

the example is here:

jquery problem

all code is inline for this demo.

thanx in advance.

Answer 1

Solved, check here

The trick to add the selector $("#one > *")