导致闪烁的jQuery鼠标指针

我有一个网站，当你翻滚一个图像时，图像上会显示一块文本

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

任何帮助都将不胜感激

这是小提琴：

---

将您的

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>

你好

---

演示：

尽管@tymeJV所说的是真的，但在某些情况下，您可能无法做到同样的事情

因此，请尝试以下方法

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

---

更新了您的

问题在于，当您将光标移到新的文本元素上时，它将接收焦点，

活动

部分失去焦点（导致您的文本失去焦点，campgain重新获得它，文本重新出现）

修改代码，使文本弹出窗口在活动元素或文本元素将鼠标置于其上时保持可见

以下是您的小提琴的更新：

---

感谢Akshay，我实际上不希望在dom中移动跨度，尽管我的问题中没有解释这一点。我喜欢你的解决办法，但实际上，这个问题并没有解决。当我关上开关时，闪烁又回来了。有没有其他方法可以做到这一点？

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

$('.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();
    } 
};