Post footer visible only on post hover?

Question

I need the post-footer to be visible only when hovering the .post div. How can I do that? The post-footer div only contains links(tags).

<div class="post"> 
  <!-- other divs --> 
  <div class="post-footer"><!-- footer content here -->
  </div> 
</div>

Look at http://stackoverflow.com/questions/676324/div-background-color-to-change-onhover Instead of changing background color just change from hidden to not hidden. — Jared, May 28 '12 at 15:49
Move that with an edit into the question, so it's better aligned and highlighted. — 11684, May 28 '12 at 16:06

Ana · Accepted Answer · 2012-05-28T16:31:04.300

With a structure like:

<div class="post">
    <!-- other divs -->
    <div class="post-footer"><!-- footer content here --></div>
</div>

You need to use something like:

.post-footer { display:none; }

.post:hover .post-footer { display: block; }

Alternatively, if you want to make it look smooth, you could use transitions on max-height:

.post-footer { max-height: 0; transition: max-height 1s linear; }

.post:hover .post-footer { max-height: 300px; /* some value that will always be larger than the height of your footer */ }

Note: browser compatibility table for transitions

Demo for both methods: http://dabblet.com/gist/2819975

+1, for CSS solution, transitions and transition-compatibility — 11684, May 28 '12 at 16:08

score 1 · Answer 2 · answered May 28 '12 at 16:00

Download jquery and include it into your html;

$(document).ready(function(){
    $('.post').hover(function(){
        $(this).find('.post-footer').toggle(true);
    },function(){
        $(this).find('.post-footer').toggle(false);
    });
});

try the above in a javascript file

Post footer visible only on post hover?

2 Answers2