Question

**** The truth is all these solutions work, just not with the project so I will re-pose the question, slightly differently ****

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.

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..

Thanks in advance for any help…

HTML

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

jQuery

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

    $('#imgSmile').mouseleave(function() {   
        $('#art').hide();
    });
});​

Here’s a fiddle

Answer 1

This same effect could be achieved using just CSS:

<div>
    <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png"></a>
</div>

div
{
 background-image:url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275');
    width:100px;
    height:100px;
    position:relative;
}
div a
{
 position:absolute;
    top:20px;
    left:30px;
    display:none;
}
div:hover a
{
    display:block;
}

​– SEE DEMO —

---

EDIT: In case you need to use this multiple times on the same page with different link URLs, I’ve made a version which requires minimal HTML using a bit of jQuery to apply the rest:

<div class="play kirkbridge" data-playUrl="/myPlayUrl"></div>

http://jsfiddle.net/tW68d/16/

This might be a bit overkill though, it depends on your usage.