범위가 지정된 요소를 토글하는 방법은 무엇입니까?

Question

들어 가자이 fiddle code 블랙 박스 위로 마우스를 이동하면 빨간색 상자가 나타나야하지만 나타나지는 않습니다.

이 스크립트가 맞습니까?

$('nav#products ul li div#info').hover(function() { 
    $('nav#products ul li div#more_info').toggleClass('show'); 
}); 

Answer 1

이 css specificity의 때문에 ID 규칙이 클래스 규칙보다 우선입니다 - 당신이 다음 display:block을 설정하는 클래스 규칙하지만 항상 클래스 규칙을 우선합니다 ID 규칙을 display: none을 설정하는 ID 규칙을 가지고있다.

당신은 ID 규칙을 재정의하는보다 구체적인 규칙을 만드는 두를 결합해야

#more_info.show { 
    display:block; 
} 

데모 : Fiddle

는 또한 대상 요소에 대한 ID를 가지고 있기 때문에 당신이 간단하게 사용할 수 있습니다 ID 선택기 - 당신이 사용하는 좀 더 복잡한 선택자 대신에 - 요소의 ID는 문서에서 유일해야합니다.