마우스 오버 문제 및 jquery 문제

Question

몇 블록에서 jquery 효과에 문제가 있습니다. Mouseenter와 mouseleave는 첫 번째 div 블록에서만 작동하지만 다른 곳에서는 그렇지 않습니다.

 $(document).ready(function() { 

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

    }); 

또한 블록 : 여기

은 JS입니다

<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> 

너희들은 문제가 무엇인지 어떤 아이디어가 있습니까? 클래스에

Answer 1

변경 ID : JS에서 다음

<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> 

:

$(document).ready(function() { 

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

Answer 2

문제는 : 그 선택 대상으로 만 문서의 첫 번째 mainbox 내부의 첫 번째 인포 박스. 에서

API 당신이 읽을 수

각 id 값은 문서 내에서 한 번만 사용할 수 있어야합니다. 개 이상의 요소에 동일한 ID가 할당 된 경우 해당 ID 을 사용하는 쿼리는 DOM에서 첫 번째로 일치하는 요소 만 선택합니다. 그러나이 동작은 에 의존하면 안됩니다. 동일한 ID를 사용하는 두 개 이상의 요소가있는 문서가 유효하지 않습니다.

그리고 이것이 코드가 작동하지 않는 이유입니다.

힌트 :

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

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