Question

I’m trying to create a gallery/carousel widget which will display a div over each image if there is a mouseover event for that specific image.
So far I have this code to display the div:

$(document).ready(function(){

  $(".background").mouseover(function(){
    $(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(".info").hide(1500);
  });
});

and html wise

<div id="wrapper">
<div id="slides">
    <ul>
         <li>
        <img class="background" src="images/1.png" width="240" height="240"/>
             <div class="info">Thats the info of this image</div>
    </li>
        <li>
               <img src="images/ogm.png" width="240" height="240"/>
                    <div class="info">Thats the info of this image</div>
        </li>
        <li><img src="images/2.jpg" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
        <li>
            <img src="images/3.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
        <li>
            <img src="images/4.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
       </li>
        <li>
            <img src="images/5.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
    </ul>
</div>

info is the div and background is the class for the images

as expected when there is a mouseover on any of the images all the info div’s get matched and appear.

Is it possible to make only the specific info div contained in the background image that triggered the mouseover appear?

Answer 1

The callback you give to a jQuery binding function is provided as context (this) the element where the event was raised. So you may search your '.info' from $(this) :

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).parent().find(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(this).parent().find(".info").hide(1500);
  });
});

Or (Renato’s suggestion) :

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).sibblings(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(this).sibblings(".info").hide(1500);
  });
});

Note that jQuery allow chaining :

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).parent().find(".info").show(1500);
  }).mouseout(function(){
     $(this).parent().find(".info").hide(1500);
  });
});

Note also that most often you need mouseenter and mouseleave instead of mouseover and mouseout.