jQuery mouseenter引起閃爍

我有一個網站，當您翻轉圖像時，圖像上會顯示一段文字。jQuery mouseenter引起閃爍

實現了所需的效果，除了如果光標位於圖像上的新文本元素上，所有內容都會開始閃爍。

任何幫助將不勝感激。

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

來源

2013-10-04 Jason Wagner

把你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/

來源

2013-10-04 16:14:32 tymeJV

雖然@tymeJV說的是真實的，但在某些情況下你可能無法做到這一點。

嘗試以下

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

更新您的fiddle

來源

2013-10-04 16:17:57

感謝阿克沙伊，我真的寧願不動跨度在我的DOM，雖然這不是我的問題解釋。我喜歡你的解決方案，但在小提琴沒有關閉。當我關閉時，閃爍返回。是否有另一種方法來實現這一目標？ –

的問題是，當你光標移到新的文本元素，則其獲得焦點，而campaign部分失去焦點（產生你的文本失去焦點，重新獲得它的誘餌，文本重新出現）。

修改您的代碼，使文本彈出框保持可見狀態，而活動元素或文本元素將鼠標放在它們上方。

下面是更新了自己的小提琴：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(); 
    } 
};

來源

2013-10-04 16:20:59 STW

jQuery mouseenter引起閃爍

回答

相關問題