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

鼠标悬停字幕在鼠标悬停时闪烁

1 个答案: