CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4671351
user4671351

Reputation:

Can't use certain jquery functions on hover effect?

I am trying to set a function that displays a hidden ficaption once the figure it is located in is hovered over. I have been able to test that the hover function is working by setting an alert message, but I just can't seem to change the figcaption's css in any capacity. This is an example of the html for each figure:

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

And my jquery:

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

How can I properly get the figcaption to display when it's figure is hovered over?

Upvotes: 0

Views: 36

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Two things:

First:: If there is no text in your figcaption, what do you really expect to see on hover?

Second: You will need to use the two possible handlers of .hover() method in order to show it when the mouse is over the figure and to hide it when the mouse leaves.

So here is it working:

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>

Upvotes: 1

Related Questions