Question

我觉得我缺少明显的东西，但似乎找不到最佳的制作方法，因此，当您将鼠标悬停在该图像上时，图像下方的按钮不会消失。这意味着将鼠标悬停在图像上以显示按钮，使您可以单击它们。悬停在按钮上时，它们才应消失。

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

我觉得自己很笨，但这使我整整陷入了困境。

Codepen：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;。您将其隐藏在无法“悬停”它们的页面上。而是使用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'})
  });
});

将鼠标悬停在相邻元素之后，无法使按钮消失

1 个答案: