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!