鼠标悬停时字幕闪烁

Question

问题可以在这里看到：http://www.studioimbrue.com/beta

代码：

$(document).ready(function(){
    $('div.caption').hide();
    $('.captions ul li img').hover(function(){
        $(this).siblings('div.caption').fadeIn('medium');
    }, function(){
        $(this).siblings('div.caption').fadeOut('medium');
    });
});

不确定是什么导致了问题...一切似乎都设置正确。

Answer 1

问题在于，当标题出现时，您的鼠标不再位于图像上——mouseleave 事件被发送到图像，mouseenter 被发送到标题 div。前者触发淡出。您可以通过将图像和标题都放入容器元素（例如<div>）并在此容器上应用事件处理程序来解决这个问题。那么无论是否显示标题，外部容器都不会收到mouseleave。

编辑：这是一个工作示例：

HTML：

<div class="captions" id="talktostrangers"> 
  <ul>
    <li> 
      <img src="image1.jpg"> 
      <div class="caption">Caption 1</div>
    </li>
    <li>
      <img src="image2.jpg"> 
      <div class="caption">Caption 2</div>
    </li>
  </ul>
</div>

Javascript：

$('.captions li').hover(function() {
  $('.caption', this).fadeIn();
}, function() {
  $('.caption', this).fadeOut();
});