Hover over image to show buttons and don't trigger when hovering over actual buttons

Question

I\'m trying to get buttons to appear when hovering over an image. The following works:

    jQuery(\'.show-image\').mouseenter(function() {
 jQuery(\'.the-button         


        

Answer 1

The simplest solution is to put the two in the same parent div and give the parent div the show-image class.

I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)

Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.

Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?

JS:

jQuery(function() {                                              // <== Doc ready

    jQuery(".the-buttons").hide();                  // Initially hide all buttons

    jQuery('.show-image').hover(function() {
         jQuery(this).find('.the-buttons').fadeIn(1500);         // use .find() !
    }, function() {
        jQuery(this).find('.the-buttons').fadeOut(1500);         // use .find() !
    });
});

Try it out with this jsFiddle

HTML: - Something like this

    
    
​

CSS: - Something like this. Yours will likely be different.

div {
    position: relative;
    float:left;
    margin:5px;}
div input {
    position:absolute;
    top:0;
    left:0; }​