2011-02-10 7 views
0

私は以下のHTMLを持っていますが、ホバーはdivを下に成長しますが、私は上向きに成長したいと思います。CSS3の移行を元に戻すにはどうすればよいですか?

<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> 

どのようにホバーの移行を元に戻すことができますか?

答えて

6

div要素ではなく、上に下の属性を設定してみてください:

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

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

+0

それを考えたことはありません、ありがとう! – jpkeisala

関連する問題