Question

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

该要求包括div，每个li爬升，有一些内容，并随li下降。现在，问题就出现了，当我离开li以在div中输入鼠标时，li会将div带到mousemove。我已尝试在mouseleave上绑定div事件，该事件采用鼠标坐标并检查鼠标是否在div中，但它运行正常但在尝试超过4或5次之后，它每次停止动画div，萤火虫没有错误。

我在css中尝试了它，包括li中的li;但是对于每个div，li与所有左div重叠，否则它本来就是小菜一碟。

在下面的代码中，bgIdeas是上面提到的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(); });。

的Javascript

    <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>

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

HTML

{{1}}

Javascript / JQuery需要魔术

0 个答案: