Why does the element overlay blinks?
<p>I'm trying to add an overlay to a div when the mouse hovers it. Althought it works, the overlay keeps blinking while I move the mouse inside the the div.
How can I prevent this?</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="d4" class="dmc_block" style="width:60%; background:#eee; z-index:1"&gt;
    &lt;div style="padding:20px;"&gt;
        &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>JS:</strong></p>

<pre><code>$('body').on('mouseenter','.dmc_block',function(){
    var o = $(this).offset();
    var h = $(this).height();
    var w = $(this).width();
    $('&lt;div&gt;').addClass('hover').css({width:w,height:h,left:o.left,top:o.top,position:'absolute',zIndex:2}).insertAfter(this);
}).on('mouseleave','.dmc_block',function(){
    $('.hover').remove();
});    
$('body').on('mouseenter','.hover',function(){return false;});
</code></pre>

<p>Fiddle: <a href="http://jsfiddle.net/T9Lhw/" rel="nofollow">http://jsfiddle.net/T9Lhw/</a></p>
