【问题标题】:mouseover captions flashing when moused over鼠标悬停时字幕闪烁
【发布时间】:2010-02-10 10:18:54
【问题描述】:

问题可以在这里看到: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');
    });
});

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

【问题讨论】:

    标签: javascript jquery html caption


    【解决方案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();
    });
    

    【讨论】:

    • 我之前尝试过几种方法,而不是使用“.captions ul li img”,我将其简化为“.captions ul li”和“.captions ul”,但都没有奏效。我刚才尝试将整个
    • 本身和 img/caption div 都包装起来,并将其称为 .mouse,但现在什么也没有出现。检查studioimbrue.com/beta
  • 看来您更改了 html 而不是 Javascript(siblings 不再合适)。我尝试在您的页面上运行$('.mouse').mouseenter(function() {alert('Hello');});,它工作正常,在鼠标进入图像时发出警报。
  • 我现在很困惑!我删除了兄弟姐妹,但仍然没有发生任何事情......代码在这里(在studioimbrue.com/beta): $(document).ready(function(){ $('.caption').hide(); $('.字幕 ul li').hover(function(){ $(this)('.caption').fadeIn('medium'); }, function(){ $(this)('.caption').fadeOut('中'); }); });
  • 猜你喜欢
    相关资源
    最近更新 更多
    热门标签