Take the 2-minute tour ×

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

    jQuery('.show-image').mouseenter(function() {
  opacity: 1
 }, 1500);
}).mouseout(function() {
  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):


Thanks in advance for any suggestions.

share|improve this question

2 Answers 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()?


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 " />

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

div {
    position: relative;
div input {
    left:0; }​
share|improve this answer

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(..., ...)

share|improve this answer
Yeah, I haven't seen "mouseenter" used much, but I have seen "mouseover" used a lot. –  coder_tim Oct 15 '10 at 23:34
[ .hover() ](api.jquery.com/hover) is simply a shortcut implementation of .mouseenter() and .mouseleave() –  Peter Ajtai Oct 16 '10 at 3:22

Your Answer


