Html 有没有办法减慢悬停效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11164567/
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
Is there a way to slow down the hover effect?
提问by S. Fellig
Is there a way to slow down a hover effect? I have a hover effect on my site (removed) that displays text on hover of the images. I want to slow down the effect by a little. It's a tad jarring how quickly the picture switches over.
有没有办法减慢悬停效果？我在我的网站上有一个悬停效果（已删除），可以在图像悬停时显示文本。我想稍微减慢效果。画面切换的速度有点令人不快。
How would I do that?
我该怎么做？
回答by eivers88
You could add css3 transitions:
您可以添加 css3 过渡：
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
回答by Zhihao
It depends on how you're displaying the text. If you're changing a CSS property you can do this with CSS3 transitions. Below is an example.
这取决于您如何显示文本。如果您要更改 CSS 属性，您可以使用CSS3 transitions 来实现。下面是一个例子。
HTML:
HTML：
<div id="A"></div><div id="B"></div>
CSS:
CSS：
div {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
-moz-transition: opacity 4s; /* Firefox */
-webkit-transition: opacity 4s; /* Safari and Chrome */
-o-transition: opacity 4s; /* Opera */
transition: opacity 4s;
}
#A {
background: red;
opacity: 1;
z-index: 1;
}
#B {
background: blue;
opacity: 0;
z-index: 2;
}
#B:hover {
opacity: 1;
}
Edit:David Thomas has told me that you cannot change the display with transitions. I have updated the above to use opacity.
编辑：大卫托马斯告诉我，你不能用过渡来改变显示。我已更新上述内容以使用不透明度。
回答by Aochi Toxx
I know this is quite a bit late but look into CSS3 animations. I use an animation on one of my Garry's Mod loading screens.
我知道这有点晚了，但请查看 CSS3 动画。我在 Garry 的 Mod 加载屏幕之一上使用了动画。
/* Styles go here */
button {
margin-left: 50%;
margin-right: 50%;
}
button:hover {
-webkit-animation: breathing 5s ease-out infinite normal;
animation: breathing 5s ease-out infinite normal;
}
@-webkit-keyframes breathing {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes breathing {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p>Below I have a button that changes size on mouse hover useing CSS3</p>
<button>Hover over me!</button>
</body>
</html>I know it's not quite the result your looking for but I'm sure you and others can find this useful.
我知道这不是您想要的结果，但我相信您和其他人会发现这很有用。
回答by Andrey
If you'd like, you could use jQuery .fadeIn() http://api.jquery.com/fadeIn/
如果你愿意，你可以使用 jQuery .fadeIn() http://api.jquery.com/fadeIn/
.fadeIn( [duration] [, callback] )
durationstring or number determining how long the animation will run.
callbackfunction to call once the animation is complete.
.fadeIn( [duration] [, callback] )
持续时间字符串或数字，确定动画将运行多长时间。动画完成后调用的
回调函数。
