Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery specific show buttons on hover

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!

like image 815
jim Avatar asked May 29 '10 05:05

jim


2 Answers

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();
    }
);
like image 174
Dom De Felice Avatar answered Nov 16 '22 03:11

Dom De Felice


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.

like image 38
patrickmcgraw Avatar answered Nov 16 '22 04:11

patrickmcgraw