JQuery: mehrere Rollovers

Question

Ich habe mehrere DIVs ein Bild in jeder enthält. Wenn ich diese DIVs rollovere, möchte ich, dass ein weiterer DIV über die Grenzen hinweg eingeblendet wird. Wenn ich dieses neue DIV herunterfahre, sollte es wieder ausbleichen. Im Grunde möchte ich so etwas wie das Netz von Thumbnails hier http://www.visualboxsite.com/

Dies ist der Code habe ich geschrieben:

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

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

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

    }); 
</script> 

Die Probleme mit diesem sind:

• Als ich über einen der DIVs rollen , Alle neuen Divs erscheinen, nicht nur die, die ich habe die Maus über
• Bewegen Sie die Maus über und von den DIVs wiederholt "stapeln" die Ein-/Ausblenden Funktionen

Kann mir jemand helfen, diese zu beheben?

Answer 1

Sie müssen präziser sein als nur irgendeine div mit diesem Klassennamen aufrufen, oder Sie werden zu viel passen (wie Sie entdeckt). Im folgenden Code stimmen wir nur das untergeordnete Element ab, das diesen Klassennamen hat:

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