jQuery mouseenter 导致闪烁

Question

我有一个网站，当您将鼠标悬停在图像上时，图像上会显示一段文本。

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

任何帮助将不胜感激。

这是 fiddle : 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/