jquery - JQuery：多次翻转

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>