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

Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.

Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)

Answer 2

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

<div class="show-image">
    <img src="http://i.stack.imgur.com/egeVq.png" />
    <input class="the-buttons" type="button" value=" Click " />
</div>​

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

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