jquery 특정 호버에 표시되는 버튼

Question

루프를 통해 div를 만드는 응용 프로그램이 있습니다.

각 사업부는 클래스 "제품"

<div class="product"> 
     !.....stuff here ....! 
     <div class="show_on_hover">...buttons here... </div> 
</div> 

그렇게 약 12 ​​페이지 당이 동일하는 div를있는 것처럼

그렇게 보이는 있습니다.

특정 항목 위에 마우스를 올려 놓고 표시 할 특정 "show_on_hover"div를 표시하고 싶습니다. none : 표시하지 않습니다. 내가 지금까지 가지고 있지만 내가 어떻게 보여주기 위해 마우스를 올리면 만 특정 하나를 얻을하는 방법 궁금 있도록이 페이지의 .show_on_hovers의 모든 표시됩니다 무엇

$('.product').hover(function() { 
    $(.show_on_hover).show(); 
    }, 
    function() { 
     $(.show_on_hover).hide(); 
    } 
); 

. 이 효과는 당신이 어떤 코멘트라도 마우스 오버 할 때 youtube에서 보이고, 어떤 코멘트 툴이 나타납니다.

감사합니다.

Answer 1

find은 내비게이션 .product 안에 .show_on_hover div가 있습니다. 이 시도 :

$('.product').hover(function() { 
     $(this).find('.show_on_hover').show(); 
    }, 
    function() { 
     $(this).find('.show_on_hover').hide(); 
    } 
); 

Answer 2

이 $ ('. show_on_hover'이)를 시도 .show()/숨기기()

JQuery와 함수에 두 번째 PARAM 추가를 그 내부로 검색을 제한합니다. 요소. 이 경우 클릭 한 div가됩니다.