悬停在相邻元素之外后无法阻止按钮消失

Question

我觉得我遗漏了一些明显的东西，但我似乎找不到制作它的最佳方法，所以当您将鼠标悬停在图片上时，图片下方的按钮不会消失。应该发生的是将鼠标悬停在图像上以显示按钮，从而允许您单击它们。悬停在按钮外时，它们才会消失。

我试过使用 mouseenter 和 mouseleave 以及下面显示的内容（我从在线示例中找到的）。我还尝试在图像下方添加更多填充以增加悬停区域，但没有成功。

我觉得自己很蠢，但这让我难住了一整天。

代码笔：https://codepen.io/gojiHime/pen/eKKroR?editors=0111

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

Answer 1

您正在按钮上使用 display:none;。您将它们隐藏在无法 'hover' 覆盖它们的页面中。而是使用 opacity 来隐藏按钮，同时让您的光标可以访问它们。

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

css

.learn-more {
  opacity: 1;
  /* your other css */
}

js

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

悬停在相邻元素之外后无法阻止按钮消失

Can't keep buttons from disappearing after hovering out of an adjacent element

jquery

jquery-hover

mouseenter

mouseleave