의 jQuery .hover()와 페이지로드

Question

나는 다음 div가 있습니다

<div id="foo"> 
... 
    <div id="bar" class="container hidden"> 
    ... 
    </div> 
</div> 

내가 트위터 부트 스트랩 3 사용하고 난 자동 기본적으로 두 번째 사업부를 숨길 숨겨진 클래스를 추가했다.

$(document).ready(function() { 
    $("#foo").hover(
     function() { 
      $("#bar", this).toggleClass("hidden"); 
     }, function() { 
      $("#bar", this).toggleClass("hidden"); 
    }); 
}); 

이 제대로 작동하는 것 같다하지만 이미 페이지로드시 #foo의 DIV를 마우스 올려 놓으면 경우, 그것은 기본적으로 호버 효과를 적용

나는 다음과 같은 코드가 있습니다. 그 후 마우스를 #foo div 밖으로 이동하면 toggleClass가 다시 적용되고 inner #bar div가 표시됩니다.

페이지로드시이 동작을 방지하는 방법은 무엇입니까?

Answer 1

아무도 그것을 언급하지하지만 의사 이벤트를 가져 인/아웃 핸들러에 동의, 그래서 당신은 클래스 전환 수 :

$("#foo").hover(function() { 
    $("#bar").toggleClass("hidden"); 
}); 

그리고 아이디로

문서의 컨텍스트에서 고유해야 할 필요는 요소를 대상으로, 문맥을 통과 없습니다 ID가있는

Answer 2

이 그것을 할 수있는 적절한 방법은 다음과 같습니다

대신 addClass() 및 removeClass()를 사용해보십시오 toggleClass()를 사용

$("#foo").hover(
    function() { 
     $("#bar", this).addClass("hidden"); 
    }, function() { 
     $("#bar", this).removeClass("hidden"); 
}); 

Answer 3

:

$("#foo").hover(

    function() { 

     $("#bar", this).addClass("hidden"); 
    }, function() { 

     $("#bar", this).removeClass("hidden"); 
}); 

이 방법을 사용하면 요소를보다 정밀하게 제어 할 수 있습니다 .