鼠标悬停时字幕会闪烁

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。前者触发淡出。您可以通过将图像和标题放入容器元素（例如

）并在此容器上应用事件处理程序来解决此问题。那么无论标题是否显示，外部容器都不会收到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();
});