javascript - 不能在悬停效果上使用某些 jquery 函数？

Question

我正在尝试设置一个函数，一旦它所在的图形悬停在上面，它就会显示一个隐藏的虚构。我已经能够通过设置警报消息来测试悬停功能是否正常工作，但我似乎无法以任何方式更改 figcaption 的 css。这是每个图的 html 示例:

<figure class="grid-block">
  <img src="img/image.jpg">
  <figcaption class="to-reveal"></figcaption>
</figure>

还有我的jquery:

jQuery(document).ready(function($){
  $(".grid-block").hover(function(){
    $(this).find("figcaption").css("display","block!important");
  });
});

当鼠标悬停在图形上时，如何正确显示图形标题？

Answer 1

两件事:

首先::如果您的 figcaption 中没有文本，您真正希望在 hover 上看到什么？

第二:您需要使用 .hover() 方法的两个可能的处理程序，以便在鼠标悬停在 figure< 上时显示它 并在鼠标离开时隐藏它。

所以这是有效的:

jQuery(document).ready(function($){
  $(".grid-block").hover(
    function(){
      $(this).find("figcaption").css("display","block");
    },
    function(){
      $(this).find("figcaption").css("display","none");
    });
});

figcaption{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<figure class="grid-block">
  <img src="http://lorempixel.com/300/150/sports">
  <figcaption class="to-reveal">
    There must be some text in your figcaption to see it!
  </figcaption>
</figure>