Question

When you hover over my image, a button will appear. The problem is that when the user tries to click on the button it starts to flicker the user is now off the <img> tag. I cannot place the jQuery hover() selector to detect when the user is hovering over my entire item as I have text under the image and I do not want the button to appear when the user is hovering over the text. How would I get the <button> to not flicker when the user tries to click it.

http://jsfiddle.net/DEQkk/

​<div class="item">
  <img src="http://www.placehold.it/250x100">
  <button>More Info</button>
  <p>Description</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​button { position:absolute; top:20px; left:90px; display:none; }​

​$('.item img').hover( function() {
        $(this).parent().find('button').show();
    }, function() {
        $(this).parent().find('button').hide();
    }
);​

Answer 1

Apply the hover effect to the image and the button:

$('.item img, .item button').hover( function() {
        $(this).parent().find('button').show();
    }, function() {
        $(this).parent().find('button').hide();
    }
);