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-buttons').animate({
  opacity: 1
 }, 1500);
}).mouseout(function() {
 jQuery('.the-buttons').animate({
  opacity: 0
 }, 1500); 
});

However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):

http://i.imgur.com/egeVq.png

Thanks in advance for any suggestions.

Answer 1

put the image and the button in the same div, then put the mouseover/mouseout events on the div. That whether if 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.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; }​