Html 如何在悬停时为元素设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10017893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to animate an element on hover
提问by Fr0stY
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:
<div>当鼠标悬停在上面时，如何使我的元素增长（并且内容将文本大小更改为更高的大小）？我把它们放在一个类中并尝试：
size: 150%;
and
和
height: +30px;
width: +30px;
the first try didn't work at all, and the second code just made the div's flash and dissappear partially.
第一次尝试根本不起作用，第二个代码只是使 div 闪烁并部分消失。
采纳答案by laymanje
CSS3 solution:
CSS3解决方案：
div {
background: #999;
width: 200px;
height: 20px;
transition: width 1s;
}
div:hover{
width: 300px;
}<div>
<p>Im content</p>
</div>回答by tsherif
I did something like this for a similar problem (you can change the scale to whatever works for you):
我为类似的问题做了这样的事情（您可以将比例更改为适合您的任何内容）：
div:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}
Note that this will scale both the div and its content, which I think is what you want.
请注意，这将缩放 div 及其内容，我认为这是您想要的。
回答by James Johnson
Using CSS you can add a hover style to the div:
使用 CSS，您可以向 div 添加悬停样式：
div.container {
width: 80%;
background-color: blue;
}
div.container:hover {
width: 100%;
background-color: red;
}
See this jsFiddlefor a demonstration.
请参阅此jsFiddle进行演示。
jQuery Solution
jQuery 解决方案
Another option that might work for you is jQuery. It's a JavaScript library that simplifies commonly needed functionality such as this. Using jQuery, you can easily add hover effects to the elements:
另一个可能适合您的选项是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);
}
);
See this jsFiddlefor a demonstration.
请参阅此jsFiddle进行演示。
