jQuery конкретные кнопки шоу на hover

Question

У меня есть приложение, создающее кучу divs через цикл.

Каждый DIV имеет класс «продукт»

так выглядит

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

так есть около 12 таких же дивы на одной странице.

Я хотел бы навести курсор на конкретный и показать конкретный div_ show_on_hover, который изначально установлен для отображения: none.

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

Это то, что я до сих пор, но он будет показывать ВСЕ .show_on_hovers на странице, так что я задаюсь вопросом, как получить только один конкретный вы наведении мышки, чтобы показать. Этот эффект отображается на youtube, когда вы наводите курсор на любой из комментариев, и появляются некоторые инструменты комментариев.

Спасибо!

Answer 1

find найдет ваши .show_on_hover divs внутри парил .product. Попробуйте это:

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

Answer 2

Попробуйте $ ('show_on_hover.', Это) .show()/скрыть()

Добавление второго параметров функции JQuery будет ограничивать поиск, чтобы быть внутри этого. элемент. В этом случае это будет div, на который нажата кнопка.