Triggering mouseenter several times on changing height for block
<p>There is problem with absolute positioned blocks - when I use $('.my-block').mouseenter() and change height in its handler - mouseenter triggers as many as it crosses other such blocks.</p>

<p>for example some thing like this:</p>

<pre><code>.items{position:relative;}
.item{position:absolute;}
</code></pre>



<pre><code>&lt;div class="items"&gt;
  &lt;div class="item item1" style="top:0; z-index:1"&gt;&lt;/div&gt;
  &lt;div class="item item2" style="top:50; z-index:2"&gt;&lt;/div&gt;
  &lt;div class="item item3" style="top:100; z-index:3"&gt;&lt;/div&gt;
  &lt;div class="item item4" style="top:150; z-index:4"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>



<pre><code>$('item').hover(function(event){
console.log("mouseenter triggered");

$(this).stop().animate({
height:400px; // it should to grow up direction
},{
step=function(now, fx){
 //changing previous items position by some magic with fx.pos and some logic
}
});

event.stopPropagation();
},function(){/*...*/})

or 

$('item').mouseenter(function(){
console.log("mouseenter triggered");
event.stopPropagation();
});
</code></pre>

<p>so when i make mouse enter on item3 in browser in log i see the string "mouseenter triggered" twice and if item4 thrice! What can I do here for preventing this?</p>
