帖子页脚仅在悬停后可见？

Posted 2023-05-08

【中文标题】帖子页脚仅在悬停后可见？

【英文标题】：Post footer visible only on post hover?

【发布时间】：2012-06-02 23:19:29

【问题描述】：

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

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

【问题讨论】：

请发布您的 html 结构。

请提供基本代码来阐述问题

看***.com/questions/676324/… 不用改变背景颜色，只需从隐藏变为不隐藏。

.post-footer 是否可见仅当 .post 悬停时？

通过编辑将其移动到问题中，以便更好地对齐和突出显示。

【参考方案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

【讨论】：

+1，用于 CSS 解决方案、过渡和过渡兼容性

【参考方案2】：

下载 jquery 并将其包含在您的 html 中；

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

在 javascript 文件中尝试上述操作