CODEWITHSUNDEEP
jquery
Jason Wagner
Jason Wagner

Reputation: 91

jQuery mouseenter causing a flicker

I have a site that where when you roll over an image, a block of text displays over the image.

The desired affect is achieved, except for the fact that if your cursor is over the new text element over the image everything starts flickering.

Any help would be greatly appreciated.

Here's the fiddle: http://jsfiddle.net/aRSw2/

Here's the JS:

$('.campaign-1').on('mouseenter', function(){
  $(this).addClass('campaign-hover');
  $('.cta').show();
});
$('.campaign-1').on('mouseleave', function(){
  $('.campaign-hover').removeClass('campaign-hover');
  $('.cta').hide();
});

Upvotes: 2

Views: 2588

Answers (3)

STW
STW

Reputation: 46366

The issue is that when you cursor over the new text element then it is receiving focus, and the campaign section loses focus (resulting in your text losing focus, the campgain re-gaining it, and the text re-appearing).

Modify your code so that the text popup remains visible while either the campaign element, or the text element have the mouse over them.

Here's an update to your Fiddle: http://jsfiddle.net/W3wEd/

$('.campaign-1').on('mouseenter', function(){
    $(this).addClass('campaign-hover');
    updateHover();
});
$('.campaign-1').on('mouseleave', function(){
    $('.campaign-hover').removeClass('campaign-hover');
    updateHover();
});
$('.cta').on('mouseenter', function(){
    $(this).addClass('cta-hover');
    updateHover();
});
$('.cta').on('mouseleave', function(){
    $(this).removeClass('cta-hover');
    updateHover();
});

function updateHover() {
    if ($('.campaign-1').hasClass('campaign-hover') || $('.cta').hasClass('cta-hover'))
    {
        $('.cta').show();        
    } else {
        $('.cta').hide();
    } 
};

Upvotes: 1

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

Although what @tymeJV said is true but in certain scenarios you may not be able to do the same.

So try the Following

$('.campaign-1,a').on('mouseenter', function(){
        $(this).addClass('campaign-hover'); 
        $('.cta').show();   
});

Updated your fiddle

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

Put your span into your section, else your mouseenter and leave are constantly being triggered causing a flicker:

<section class="campaign-1">
<a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png"/></a>
<span class="cta"> Hello </span>
</section>

Demo: http://jsfiddle.net/aRSw2/2/

Upvotes: 3

Related Questions