HTML/CSS 将鼠标悬停在按钮上以显示页脚

Question

因此，对于我的项目，我设置了固定的页眉和页脚，但注意到我的页脚相当大。我想做的是隐藏它并向底部添加一个按钮，当您将鼠标悬停在该按钮上时将显示整个页脚。

我将如何添加此功能？非常感谢任何帮助！

Answer 1

jquery 解决方案：

$("#button").hover(function(){$("#footer").show()})

注意：将"button"替换为按钮ID，将"footer"替换为页脚ID。

Answer 2

CSS解决方法：（show/hide完全）

要使其正常工作，您只需将按钮和页脚设为兄弟姐妹

#footer
{
  display: none;
}
#button:hover ~ #footer
{
  display: block;
}

您可以使用相同的技术来指定不同的大小，而不是 show/hide。

正如 Ali Sheikhpour 所说：注意：将 "button" 替换为按钮的 ID，将 "footer" 替换为页脚的 ID。

HTML/CSS making a mouse over button to display footer