Mouseover problems and jquery issue

1
votes

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?

2
javascriptjqueryhtmlcss
IDs must be unique! - Yury Tarabanko
You can't have multiple elements with the same ID. ID needs to be unique per the document. - crush
possible duplicate of jQuery Tooltip only works for first row of table - JJJ
To be more exact, you CAN have multiple IDs in one document, however it's not standard compliant. A selector like $('#mainbox') will only return the first found though... - marekful

2 Answers

0
votes

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();
     });
});
2
votes

The problem is: That selector targets only the first infobox inside the first mainbox in your document.

In the API you can read:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

And that, is why your code isn't working.

Hint: Switch ids to classes and bind the mouse events to search inside the div like:

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

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