如何在悬停时为元素设置动画

Question

当我<div>盘旋时,如何让我的元素增长(内容将文本大小更改为更高的元素)？我把它们放在一个班级并尝试:

size: 150%;

和

height: +30px;
width: +30px;

第一次尝试根本不起作用,第二个代码只是使div闪现并部分消失.

Answer 1

CSS3解决方案:

div {
    background: #999;
    width: 200px;
    height: 20px; 
    transition: width 1s;
}

div:hover{
    width: 300px;
}

<div>
    <p>Im content</p>
</div>

http://jsfiddle.net/MrdvW/

Answer 2

我为类似的问题做了这样的事情（您可以将比例更改为适合您的任何内容）：

div:hover {
 -webkit-transform: scale(1.1);
 -moz-transform:    scale(1.1);
 -o-transform:      scale(1.1);
 -ms-transform:     scale(1.1);
}

请注意，这将缩放 div 及其内容，我认为这是您想要的。