Question

我有多个DIV，每个DIV都包含一个图像。当我翻转这些DIV时，我希望另一个DIV在顶部淡入。当我滚动这个新的DIV时，它应该再次淡出。基本上我想要像http://www.visualboxsite.com/

这样的缩略图网格

这是我写的代码：

<script>
  $(document).ready(function(){

    $("div.projectImage").mouseenter(function () {
      $("div.textRollover").fadeIn(100);
    });

    $("div.textRollover").mouseleave(function () {
      $("div.textRollover").fadeOut(100);
    });

  }); 
</script>

问题是：

当我滚动其中一个DIV时，会出现所有新DIV，而不仅仅是我将鼠标悬停在DIV上
反复移动鼠标反复“堆叠”淡入/淡出功能

任何人都可以帮忙解决这些问题吗？

Answer 1

您需要更具体，而不仅仅是使用该类名调用任何div，或者您将匹配太多（如您所发现的）。在以下代码中，我们仅匹配具有该类名的子元素：

$(".rollMe").hover(
  function(){
    /* 'this' is whichever div.rollMe you are currently
       hovering over at this particular moment */
    $(this).find("div.iFade").fadeIn(100);
  },
  function(){
    $(this).find("div.iFade").fadeOut(100);
  }
);

<div class="rollMe">
  <div class="iFade">

  </div>
</div>

JQuery：多个翻转

1 个答案: