Question

我有一个网站，当您翻转图像时，图像上会显示一段文字。

实现了所需的效果，但如果光标位于图像上方的新文本元素上，则一切都会开始闪烁。

非常感谢任何帮助。

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

更新了您的fiddle

Answer 3

问题在于，当您将光标放在新文本元素上时，它正在接收焦点，并且campaign部分失去焦点（导致您的文本失去焦点，重新获得它，并且重新获得文本-appearing）。

修改代码，以便在广告系列元素或文字元素将鼠标悬停在文字框架上时，文字弹出窗口仍然可见。

以下是您的小提琴的更新：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();
    } 
};

jQuery mouseenter导致闪烁

3 个答案: