Question

I’m trying to create a row of divs with hidden images inside, when moused over the middot will fade out, image will fade in, then fade out when the mouse leaves that div. I know I need to do something with the .hover function in jquery.

For example

<div id='1_1'>
 &midddot;
 <img src='image1_1.jpg' style='display:none'>
</div>
<div id='1_2'>
 &midddot;
 <img src='image1_2.jpg' style='display:none'>
</div>
<div id='1_3>
 &midddot;
 <img src='image1_3.jpg' style='display:none'>
</div>

Each div will represent a page of an article. So where id=’1_3′, that’d be a row 1, page 3, or id=’1_1′ would be row 1, page 1.

Just not sure how to structure the jquery to get this done.

FYI, I’m using php/mysql to output the info. So the above code would be one loop in that “while” statement. Subsequent loops would increase the row number (id=”2_1″, “2_2”, etc.).

Thanks for any advice.

Answer 1

Add a class to your divs to make them easier to select in jQuery.

<div id='1_1' class='fade'>
   &midddot;
   <img src='image1_1.jpg' style='display:none'>
</div>
<div id='1_2' class='fade'>
   &midddot;
   <img src='image1_2.jpg' style='display:none'>
</div>
...

Then use the hover function:

 <script type="text/javascript">
    $(document).ready(function() {
       $("li.fade").hover(function(){  
           $("img", this).fadeIn();
           $("img", this).fadeOut();
       });
    });
  </script>