Image overlay is flickering?
<p><em><strong></em> The truth is all these solutions work, just not with the project so I will re-pose the question, slightly differently **</strong></p>

<p>Essentially I have an image, which when someone moves their mouse cursor over it, it displays a div (which contains an image - aka play button). When they move they're cursor outside of the image, the play button disappears.</p>

<p>It works but if you move the curse over the play button it flickrs like mad, hence I must have my events mixed up somehow..</p>

<p>Thanks in advance for any help...</p>

<p>HTML</p>

<pre><code>&lt;div id="cont"&gt;
    &lt;div id="art"  style= "position: absolute; left: 20px; top: 40px;"&gt;
        &lt;a href="#"&gt;&lt;img src="http://www.newmusicproducer.com/img/ic_play.png"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile"&gt;&lt;/img&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$(document).ready(function() {
    $('#art').hide();             
    $('#imgSmile').mouseenter(function() {
        $('#art').show();
    });

    $('#imgSmile').mouseleave(function() {   
        $('#art').hide();
    });
});​
</code></pre>

<p><a href="http://jsfiddle.net/tW68d/" rel="nofollow">Here's a fiddle</a></p>
