Question

我正在尝试设置一个函数，一旦它所在的数字悬停在上面就显示一个隐藏的ficaption。我已经能够通过设置警报消息测试悬停功能是否正常工作，但我似乎无法以任何身份改变figcaption的css。这是每个数字的html示例：

ds = new DataSet();
ds.Tables.Add("Table1");
ds.Tables[0].Load(reader);
for (int ii = 1; ii < expectedTableCount; ii++)
{
    ds.Tables.Add("Table" + (ii + 1));
    ds.Tables[ii].Load(reader);
}

我的jquery：

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

当它的数字悬停在上面时，我怎样才能正确显示figcaption？

Answer 1

两件事：

首先：：如果figcaption中没有任何文字，您真正希望在hover上看到什么？

第二次：您需要使用.hover()方法的两个可能的处理程序，以便在鼠标位于figure上时显示它，并在老鼠离开。

所以这是工作：

＆＃13;

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

＆＃13;

figcaption{
  display:none;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: