jquery specific show buttons on hover

Question

I have an application creating a bunch of divs through a loop.

Each div has the class "product"

so it looks like

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

so there are about 12 of these same divs per page.

I would like to hover over a specific one and show the specific "show_on_hover" div which is initially set to display:none.

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

That is what I have so far but it will show ALL of the .show_on_hovers on the page so I am wondering how to get only the specific one you have moused over to show. This effect is seen on youtube when you mouseover any of the comments, and some comment tools pop up.

Thanks!

Answer 1

find will find your .show_on_hover divs inside the hovered .product. Try this:

$('.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()

Adding the second param to the jQuery function will constrain the search to be inside that element. In this case this will be the div that is clicked on.