Image Overlay Is Flickering?

**** 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 move

Solution 1:

This same effect could be achieved using just CSS:

<div>
    <ahref="#"><imgsrc="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:

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

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

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

Solution 2:

The problem is mousing over the new image is causing mouseout on the original. Try using hover() instead, along with both elements as the selector.

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

Updated fiddle

Solution 3:

Here's an alternative approach:

http://jsfiddle.net/aramk/ZqVZ6/1/

$(document).ready(function(){

    var art = $('#art');
    art.hide();
    var updatePlayButton = function() {
        if (art.is(':visible')) {
            art.hide();
        } else {
            art.show();
        }
    }

    $('#cont').hover(updatePlayButton);

});​

I'd use a wrapping DIV, since when the button overlaps the smile image and your mouse is over it you lose focus from the smile image and it starts flashing. This will avoid that.

Solution 4:

can be done using CSS too, if thats a posibility.

here is the fiddle http://jsfiddle.net/xasy4/

<divid="imgSmile"><divid="art"><ahref="#"><imgsrc="http://www.newmusicproducer.com/img/ic_play.png"></a></div></div>

the css

#imgSmile
{
    background: url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275') no-repeat center Transparent;
    width: 100px;
    height: 100px;
}
#imgSmile > #art
{
    position: absolute; left: 20px; top: 40px; opacity: 0;
}
#imgSmile:hover > #art
{
    position: absolute; left: 20px; top: 40px; opacity: 1;
}

Solution 5:

You can use the .on() method, than set both element as selectors and use an event (e) checker like:

demo jsBin

$(document).ready(function(){

    $('#art').hide();


    $('#imgSmile, #art').on('mouseenter mouseleave',function(e){
        if(e.type === 'mouseenter'){
            $('#art').show();
        }else{
            $('#art').hide();   
        }
    });

});

---

What I like the most is the use of the Ternary operator like:

$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
    var et = e.type === 'mouseenter' ? $('#art').show() :  $('#art').hide();  
});

Demo with ternaly operator

---

You can use in your exact case just the .toggle() method:

$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
    $('#art').toggle(); 
});

demo with .toggle()