ホバー効果で特定のjquery関数を使用することはできませんか？

Question

私は隠されたficaptionを表示する機能を設定しようとしています。私は、ホバー機能がアラートメッセージを設定することによって動作していることをテストすることができましたが、私はちょうどどんな容量でも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"); 
    }); 
}); 

どのように私はきちんとそれの姿がホバーしたときfigcaptionを表示するために得ることができますか？

Answer 1

2つのこと：

まず：：あなたのfigcaptionには内容がない場合は、あなたが本当にhoverに見に何を期待していますか？

第二：あなたは、マウスがfigure上にあるときにそれを表示するには、マウスが離れたときにそれを隠すために.hover()方法の2つの可能なハンドラを使用する必要があります。だからここ

それが働いている：

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>