Question

将鼠标悬停在我的图片上时，会出现一个按钮。问题是，当用户试图点击按钮时，它开始闪烁，用户现在已经关闭了<img>标签。我不能放置jQuery hover()选择器来检测用户何时悬停在我的整个项目上，因为我在图像下面有文本，并且我不希望当用户将鼠标悬停在文本上时按钮出现。当用户试图点击它时，如何让<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();
    }
);

Working Demo.

修改：在<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();
    }
);

悬停时防止按钮闪烁

2 个答案: