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

【问题标题】：How to animate an element on hover如何在悬停时为元素设置动画
【发布时间】：2012-04-18 13:27:42
【问题描述】：

如何使我的<div> 元素在悬停时增长（并且内容将文本大小更改为更大）？我把它们放在一个类中并尝试：

size: 150%;

和

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

第一次尝试根本不起作用，第二次代码只是让 div 的闪烁和部分消失。

【问题讨论】：

只能在 CSS3 中使用旧浏览器不支持的 CSS3 来完成，例如 IE9、FF4 Safari 4 和 Chrome 15 之前的所有内容。这是您要找的吗？
@laymanje 好吧，我只是想增加一个 div 的大小，当悬停时，这个 div 是否与我网站上的另一个重叠并不重要：maxwf.net16.net/index/index.html（你知道我所说的 div 是什么意思）

标签： html css css-transitions

【解决方案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/

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

非常感谢。是的，这就是我一直在寻找的 xD，但是我使用下面的答案来做到这一点，它看起来已经很不错了！

【解决方案3】：

使用 CSS 可以为 div 添加悬停样式：

div.container {
    width: 80%;
    background-color: blue;
}

div.container:hover {
    width: 100%;
    background-color: red;
}

查看此jsFiddle 进行演示。

jQuery 解决方案

另一个可能对您有用的选项是jQuery。它是一个 JavaScript 库，可简化诸如此类的常用功能。使用 jQuery，您可以轻松地为元素添加悬停效果：

//hover effect applies to any elements using the 'container' class
$(".container").hover(
    function(){ //mouse over
        $(this).width($(this).width() + 30);
    },
    function(){ //mouse out
        $(this).width($(this).width() - 30);
    }
);

请参阅此jsFiddle 进行演示。

【讨论】：

谢谢，但有一个问题。这样，我无法以 % 定义大小，因为我有 3 个以上的 div 彼此相邻，如下所示：jsfiddle.net/epS96（js fiddle 无法正确显示 css）并且我希望每个 div 能够成长……
@Fr0stY，你可以使用任何单位来设置宽度，试着摆弄他的例子。
好的，谢谢。有什么东西可以告诉它是现有的宽度加上 30 px 左右，比如 width: width+30px;高度：高度+30px；
只需硬编码 :) 如果您只在两种尺寸（普通尺寸和悬停尺寸）之间进行更改，我建议使用特定数字以避免意外得到奇怪的结果
好的。我想这是唯一要做的事情:(但是:)感谢所有帮助:D:D