在导航下面的网站布局中,当鼠标悬停在按钮上时它会上升,当鼠标移开时它会下沉,如何用css或其他方式做到这一点?
www.bigfishgames.com/
在导航下面的网站布局中,当鼠标悬停在按钮上时它会上升,当鼠标移开时它会下沉,如何用css或其他方式做到这一点?
www.bigfishgames.com/
你可以用纯 CSS 来做到这一点:
<!DOCTYPE html>
<html>
<head>
<style>
div { border-radius: 4px; width: 100px; height: 20px; background: green; position: absolute; top: 50px; left: 50px; text-align: center; padding: 10px 0px; }
div:hover { top: 40px; padding-bottom: 20px; }
</style>
</head>
<body>
<div>Howdy</div>
</body>
</html>
请注意两者padding-bottom
和height
是如何改变的,以给人div
一种“向上”扩展的错觉。