JQuery конкретные кнопки показа при наведении

Question

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

Каждый div имеет класс «product»

так выглядит

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

так что примерно 12 таких же div на странице.

Я бы хотел навести курсор на определенный элемент и показать конкретный div "show_on_hover", который изначально настроен на отображение: нет.

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

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

Спасибо!

Answer 1

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

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

Answer 2

Try $ ('. show_on_hover', this) .show () /. hide ()

Добавление второго параметра в функцию jQuery ограничит поиск внутри этого элемента. В этом случае это будет div, по которому щелкают.