1

我li在页面底部放置了导航链接，每个链接本身都有一个图像。在鼠标悬停时，在进入时，我将 li 的顶部设置为图像大小的负值，以便图像向上滑动，在鼠标离开时，我将顶部设置为 0。

要求包括一个div与每个 一起爬上去的li，有一些内容，并与li. 现在，问题就出现在这里，当我离开li进入鼠标时div，li水滴带走了div它。我尝试了绑定mousemove事件，mouseleave它获取鼠标坐标并检查鼠标是否在 中div，它工作正常，但是在尝试了超过 4 或 5 次之后，它div每次都停止动画，firebug 没有错误。

我已经用 css 试过了，包括divin li; 但是对于each li，所有 left 的div重叠li，否则这将是小菜一碟。

在下面的代码中，bgIdeas 就是div上面提到的。

Javascript

    a.cache.brand_nav.find("li a").hover(function (c) {
        if (a.isTablet && c.currentTarget.href !== f) d.location = c.currentTarget.href;
        else {
            c = b(this);
            c.stop(true, true).animate({ top: '-' + c.find("img").height() + 'px' }, 250, 'easeInCirc');
            $('#bgIdeas').stop(true, true).animate({ bottom: '+' + c.find("img").height() + 'px' }, 500, 'easeInCirc', false);
        }
    },
    function () {
        c = b(this);
        $('#bgIdeas').stop(true, true).animate({ bottom: '0px' }, 250, 'easeInCirc');
        c.stop(true, true).animate({ top: '0px' }, 250, 'easeInCirc');
        clearInterval(myRecFunc);
        $('.bgs').fadeIn(1000).show();
        continueSlideShow();
    });

注释的代码是我绑定 mousemove 事件以阻止 li 如果指针位于 div 上则下拉的代码。

HTML

    <ul class="clearfix">

  <li>
    <a style="top: 0px;" href="#" title="Ideas" class="ideas">
    <span class="top">
        <span class="logo">Ideas</span>
        <span class="description">abc<br>
          Click Here</span>
          <span class="creator"><small>abc</small><br>
          Click Here</span>
    </span>
    <img src="images/abc_thumb.jpg" alt="Ideas">
    </a>
  </li>

  <li>
      <a style="top: 0px;" href="#" title="def" class="def">
      <span class="top">
          <span class="logo">Def</span>
          <span class="description">Def<br>
          Click Here</span>
          <span class="creator"><small>Def</small><br>
          Click Here</span>
      </span>
      <img src="images/def_thumb.jpg" alt="Def">
      </a>
  </li>

  <li>
      <a style="top: 0px;" href="#" title="ghi" class="ghi">
      <span class="top">
          <span class="logo">ghi</span>
          <span class="description">ghi<br>
          Click Here</span>
          <span class="creator"><small>ghi</small><br>
          Click Here</span>
      </span>
      <img src="images/ghi_thumb.jpg" alt="ghi">
      </a>
  </li>

  <li>
      <a style="top: 0px;" href="#" title="jkl" class="jkl">
      <span class="top">
          <span class="logo">jkl</span>
          <span class="description">jkl<br>
          Click Here</span>
          <span class="creator"><small>jkl</small><br>
          Click Here</span>
      </span>
      <img src="images/jkl_thumb.jpg" alt="jkl">
      </a>
  </li>

  <li>
      <a style="top: 0px;" href="#" title="mno" class="mno">
      <span class="top">
          <span class="logo">mno</span>
          <span class="description">mno<br>
          Click Here</span>
          <span class="creator"><small>mno</small><br>
          Click Here</span>
      </span>
      <img src="images/mno_thumb.jpg" alt="mno">
      </a>
  </li>

</ul>
4

0 回答 0