Question

I have multiple DIVs containing an image in each. When I rollover these DIVs, I want another DIV to fade in over the top. When I roll off this new DIV, it should fade out again. Essentially I want something like the grid of thumbnails here http://www.visualboxsite.com/

This is the code I have written:

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

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

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

  }); 
</script>

The problems with this are:

• When I roll over one of the DIVs, ALL of the new DIVs appear, not just the one I have the mouse over
• Moving the mouse over and off the DIVs repeatedly ‘stack’ the fade in/fade out functions

Can anyone help fix these?

Answer 1

You need to be more specific than just calling any div with that classname, or you’ll match too much (as you discovered). In the following code, we only match the child element that has that classname:

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