jquery - 悬停时防止按钮闪烁

Question

当您将鼠标悬停在我的图像上时，将出现一个按钮。问题是当用户试图点击按钮时，它开始闪烁，用户现在离开了<img>标签。我无法放置 jQueryhover()选择器来检测用户何时将鼠标悬停在我的整个项目上，因为我在图像下有文本，并且我不希望当用户悬停在文本上时出现按钮。<button>当用户尝试单击它时，我将如何使它不闪烁。

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

它闪烁是因为当鼠标进入或悬停在按钮上时，它会离开图像。要修复它，请将事件处理程序移动到<div>：

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

工作演示。

编辑：<div>在你的内部放置一个.item图像和包裹在其中的按钮，如下所示：

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

Answer 2

将悬停效果应用于图像和按钮：

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