CODEWITHSUNDEEP
jqueryhtmlcss
Jon
Jon

Reputation: 8531

Prevent Button Flicker When Hover

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();
    }
);​

Upvotes: 1

Views: 2116

Answers (2)

JCOC611
JCOC611

Reputation: 19729

It flickers because when the mouse enters, or hovers over the button, it leaves the image. To fix it, move the event handler to the <div>:

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

Working Demo.

Edit: Place a <div> inside of your .item with the image and the button wrapped inside of it, as such:

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

Upvotes: 2

Tim Booker
Tim Booker

Reputation: 2789

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();
    }
);

Upvotes: 2

Related Questions