Image overlay is flickering?

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

Curtis · Accepted Answer · 2012-05-03T11:32:20.003

4

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.

edited May 03 '12 at 11:32

answered May 03 '12 at 11:16

Curtis

101,612
66
270
352

+1 Nice solution. Although it won't work in – Rory McCrossan May 03 '12 at 11:17
@jamcoupe You're right IE7 is fine, my mistake. It definitely won't work in IE6 though. – Rory McCrossan May 03 '12 at 11:43
2

@RoryMcCrossan It won't work on a Nokia 3210 either. If a user is using either of these technologies they shouldn't expect things to work correctly. – Curtis May 03 '12 at 11:48
1

@Curt LOL I know :D Just making sure people have all the facts when deciding how to do something. The fact IE6 still has ~7% share means you can't totally ignore it yet. Unfortunately. – Rory McCrossan May 03 '12 at 11:50
@RoryMcCrossan Yeah that's very true! – Curtis May 03 '12 at 12:00
I have chosen this answer, basically because it covers both the CSS and Jquery solution(s). – Chris May 03 '12 at 14:13

score 3 · Answer 2 · answered May 03 '12 at 11:08

3

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

answered May 03 '12 at 11:08

Rory McCrossan

331,213
40
305
339

I get no flickering here in FF12 - what browser are you using? – Rory McCrossan May 03 '12 at 11:16
Im using Chrome, but it has to work in all browsers, especially IE. CSS above example does work in IE9. – Chris May 03 '12 at 11:25
I've just tested in Chrome 18.0.1025.168 m and it doesn't flicker there either? – Rory McCrossan May 03 '12 at 11:38

Roko C. Buljan · Answer 3 · 2012-05-03T11:20:15.933

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()

score 1 · Answer 4 · answered May 03 '12 at 11:17

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.

score 1 · Answer 5 · answered May 03 '12 at 11:18

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

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

<div id="imgSmile">
     <div id="art">
        <a href="#"><img src="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;
}

score 1 · Answer 6 · answered May 03 '12 at 11:20

http://jsfiddle.net/jqkBx/1/

Why dont you just use CSS for hover effects?

HTML

<div id="wrapper">
  <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile" />

  <div id="art" style="position: absolute; left: 20px; top: 40px;">
     <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png" /></a>
  </div>
  </div>

CSS

#art{
    display:none;
}
#wrapper{
    width:100px;
    height:100px;        
}
#wrapper:hover #art{
    display:block;        
}

score 0 · Answer 7 · answered May 03 '12 at 11:17

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

just add #art mouse enter event

Image overlay is flickering?

7 Answers7

demo jsBin

Demo with ternaly operator

demo with .toggle()

Linked