javascript - 鼠标悬停时字幕闪烁

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