Question

当光标位于浏览器底部时，我希望页面的页脚向上滑动到屏幕上。我不知道该在哪里，但这是我的页脚的CSS代码：

footer {
background-color: #333;
position: fixed; 
bottom: 0;
left: 0;
right: 0;
height: 75px;
clear: both;
float:none;
}

Answer 1

你可以通过将页脚包装在容器中来完成一些jquery

$(".footer-container").hover(function(){
  $(".footer").stop().animate({"bottom": "0"});    
},function(){
  $(".footer").stop().animate({"bottom": "-75px"});    
});

JSFIDDLE

Answer 2

您可以使用CSS Transitions更改指定时长内的属性值，以实现上滑效果。

是否上滑/展开页脚：

footer {
  position: fixed; 
  bottom: 0; left: 0; right: 0;
  height: 75px;

  transition: height .2s ease-in; /* Use transition for 'height' or all */
}

footer:hover {
  height: 50%; /* Change the height of the footer as the half of the screen */
}

<强> WORKING DEMO

或者在悬停时向上滑动/显示页脚：

footer {
  position: fixed; 
  bottom: -75px; left: 0; right: 0;
  border-top: 20px solid transparent;
  height: 75px;

  transition: all .2s ease-in;
}

footer:hover { bottom: 0; }

<强> UPDATED DEMO

当光标位于浏览器底部时，页脚会向上滑动

2 个答案: