JQuery: vários capotamentos

Question

Eu tenho vários DIVs que contêm uma imagem em cada um. Quando eu rollover estes DIVs, eu quero outro DIV a desvanecer-se em cima do topo. Quando eu rolar para fora este novo DIV, deve desaparecer novamente. Basicamente eu quero algo como a grade de miniaturas aqui http://www.visualboxsite.com/

Este é o código que tenho escrito:

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

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

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

  }); 
</script>

Os problemas com este são:

• Quando eu rolar sobre um dos DIVs, todos os novos DIVs aparecer, não apenas o que eu tenho o mouse sobre
• Mover o mouse sobre e fora das DIVs repetidamente 'pilha' o fade in / fade out funções

Alguém pode ajudar a corrigir esses?

Answer 1

Você precisa ser mais específico do que apenas chamar qualquer div com que classname, ou você vai corresponder muito (como você descobriu). No código a seguir, temos apenas coincidir com o elemento filho que tem esse nome de classe:

$(".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>