如何在悬停时动画元素 [英] How to animate an element on hover

问题描述

如果我的< div> 元素增长（和内容更改文本大小更高的元素）我把他们在一个类，并尝试：

How can I make my <div> elements grow (and the content changes text size to a higher one), when hovered over? I put them in a class and tried:

size: 150%;

和

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

第一次尝试没有工作，第二个代码只是使div的闪光灯和消失部分。

the first try didn't work at all, and the second code just made the div's flash and dissappear partially.

推荐答案

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/

这篇关于如何在悬停时动画元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！