0

ホバーが div を下向きに成長させる次の HTML がありますが、上向きに成長させたいと思います。

<html>
<head>
<style type="text/css"> 

div
{
position:absolute;
top:130px;
left:30px;
width:100px;
height:100px;
background:red;
-webkit-transition:height 2s; 

}

div:hover
{
height:200px;
}
</style>
</head>
<body>


<div></div>



</body>
</html>

ホバー時に遷移を元に戻すにはどうすればよいですか?

4

1 に答える 1

8

top ではなく、div に bottom 属性を設定してみてください。

div
{
position:absolute;
bottom:130px;
left:30px;
width:100px;
height:100px;
background:red;
-webkit-transition:height 2s;     
}

例: http://jsfiddle.net/lukemartin/s9jEp/

于 2011-02-10T11:12:37.073 に答える