Question

只有在悬停.post div 时才需要后页脚。我怎样才能做到这一点？后页脚 div 仅包含链接（标签）。

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

Answer 1

具有如下结构：

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

您需要使用以下内容：

.post-footer { display:none; }

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

或者，如果您想让它看起来流畅，可以使用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 */ }

注意：browser compatibility table for transitions

两种方法的演示：http://dabblet.com/gist/2819975

Answer 2

下载jquery并将其包含在您的HTML中;

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

在javascript文件中尝试上述内容

仅在帖子悬停时可以看到帖子页脚？

2 个答案: