jquery - jQuery mouseenter 导致闪烁

Question

我有一个网站，当您滚动图像时，会在图像上显示一个文本块。

达到了预期的效果，除了如果您的光标位于图像上的新文本元素上，则所有内容都开始闪烁。

任何帮助将不胜感激。

这是小提琴：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();
});

Answer 1

将您的span放入您的部分，否则您的mouseenter和leave不断被触发导致闪烁：

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

演示：http: //jsfiddle.net/aRSw2/2/

Answer 2

虽然@tymeJV 说的是真的，但在某些情况下你可能无法做到这一点。

所以尝试以下

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

更新了你的小提琴

Answer 3

问题是，当您将光标悬停在新的文本元素上时，它正在接收焦点，并且该campaign部分失去焦点（导致您的文本失去焦点，campgain 重新获得它，并且文本重新出现）。

修改您的代码，以便当活动元素或文本元素将鼠标悬停在它们上方时，文本弹出窗口仍然可见。

这是您的 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();
    } 
};