引起闪烁的jQuery鼠标

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部分将失去焦点(导致文本失去焦点，喜树重获焦点，文本再次出现)。

修改您的代码，使文本弹出保持可见，而运动元素，或文本元素有鼠标在他们上面。

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