如何在悬停时隐藏和扩展页脚？

Question

首先如何隐藏部分页脚并在鼠标悬停时仅显示完整页脚？只有HTML5和CSS才有可能吗？

<div class="footer"> Copyright 
    <div id="hidden"> 
        <p> content </p> 
        <p> content </p> 
    </div> 
</div>

CSS

#hidden {display:none}

当鼠标放在页脚栏上时，不知道如何让它向上滑动，如何让它向上滑动？

Answer 1

用户将鼠标悬停在哪里？页脚？如果是这样，是的，它很可能使用：hover pseudo。

#footer {height:100px;overflow:hidden;}
#footer:hover {height:auto;}

Answer 2

您应该将页脚的隐藏部分作为整个页脚的子项，然后您只需在CSS中添加如下内容：

#hidden-footer {
    display: none;
}
#footer-wrapper:hover #hidden-footer {
    display: block;
}

Answer 3

这是我解决类似问题的方法：

#footer {
    height: 50px;
    transition-duration: 0.300s;
}

#footer:hover {
    height: 100px;
}

您可能还可以执行类似div.footer:hover #hidden {height: 100px}更改一个元素的内容#hidden - 当另一个元素 - div.footer - 悬停时。