Question

I have a problem with jquery effects on few blocks.
Mouseenter and mouseleave work only on the first div block while on all others it doesn’t.

Here is the JS:

 $(document).ready(function() {

     $('#mainbox').mouseenter(
         function () {
           $('#infobox').fadeIn();
         }); 
     $('#mainbox').mouseleave(
         function () {
           $('#infobox').fadeOut();
         });

   });

And also blocks:

<div id="mainbox"><div id="infobox" style="display: none;">first block - it works on      this one</div></div>

<div id="mainbox"><div id="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div id="mainbox"><div id="infobox" style="display: none;">3rd block - it doesn't work</div></div>

Do you guys have any ideas what the problem is?

Answer 1

Change id to class:

<div class="mainbox"><div class="infobox" style="display: none;">first block - it works on      this one</div></div>


<div class="mainbox"><div class="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div class="mainbox"><div class="infobox" style="display: none;">3rd block - it doesn't work</div></div>

Then in JS:

$(document).ready(function() {

 $('.mainbox').mouseenter(
     function () {
       $(this).find('.infobox').fadeIn();
     }); 
 $('.mainbox').mouseleave(
     function () {
       $(this).find('.infobox').fadeOut();
     });
});