Jquery Can'；t将鼠标悬停在相邻元素之外后，不能使按钮消失

我觉得我遗漏了一些明显的东西，但我似乎找不到最好的方法来做到这一点，这样图像下面的按钮就不会在你离开图像时消失。这意味着你将鼠标悬停在图像上，显示按钮，允许你点击它们。当鼠标悬停在按钮外时，它们才应该消失

我试过使用

mouseenter

和

mouseleave

以及下面所示的内容（我从网上的一个示例中找到）。我还尝试在图片下方添加更多的填充，以增加悬停区域，但没有成功

我觉得自己很笨，但这让我一整天都很难受

代码笔：

jQuery：

$(document).ready(function() {
  $(".thumb").each(function() {
    $(this).hover(
      function() {
        $learn = $(this)
          .parent()
          .prev();
        $cta = $(this).next();
        $learn.stop(true, true).fadeIn();
        $cta.stop(true, true).fadeIn();
      },
      function() {
        $learn = $(this)
          .parent()
          .prev();
        $cta = $(this).next();
        $learn.stop(true, true).fadeOut();
        $cta.stop(true, true).fadeOut();
      }
    );
  });
});

---

您正在使用

display:none在您的按钮上。您正在将它们隐藏在页面中，无法在页面上“悬停”。而是使用，
opacity
，隐藏按钮，同时保持光标可以访问按钮

您也不必遍历选择器元素，因为jQuery已经为您完成了这项工作。因此，您可以减少jQuery代码

css

js

但是在图像上悬停会怎么样？当鼠标悬停在图片上时，按钮会显示出来，当鼠标悬停在远离按钮的位置时，按钮会消失。更新了JS。编辑：再次更新，因为使用.thumb类不包括悬停按钮。在调整了一些CSS后，我确实可以使用它。谢谢
.learn-more {
  opacity: 1;
  /* your other css */
}

$(document).ready(function() {
  $('.inner').hover(function() {
    $(this).find('.learn-more').css({'opacity':'1'})
  }, function(){
    $(this).find('.learn-more').css({'opacity':'0'})
  });
});