Html 延迟：使用 CSS 悬停？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15601874/
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
Delaying :hover using CSS?
提问by AlesSvetina
I have a menu in which onHover apears a infobox, telling what the button does. How can I apply a delay so that the box apears let's say one second after i put my mouse over the button?
我有一个菜单，其中 onHover 显示一个信息框，告诉按钮的作用。如何应用延迟，以便在我将鼠标悬停在按钮上一秒钟后，框出现？
HTML:
HTML：
<td class="info"><a id="login-edit_account" href="../login-edit_account.php">Edit account<span><div id="pointer"></div><p style="font-size:11px">Edit user's information.</p></span></a></td>
CSS:
CSS：
td.info {
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none
}
td.info:hover {
z-index:25;
background-color:#fff
}
td.info span {
display: none;
transition: 0s display;
}
td.info:hover span { /*the span will display just on :hover state*/
display:block;
position:absolute;
top:42px; left:7px;
width:210px;
border:2px solid #0cf;
padding: 5px;
background-color:#fff; color:#000;
text-align: center;
-webkit-transition-delay:5s;
}
#pointer {
border:solid 10px transparent;
border-bottom-color:#0cf;
position:absolute;
margin:-27px 0px 0px 10px;
}
回答by banzomaikaka
It's really pretty simple. Example:
这真的很简单。例子：
a {
-webkit-transition: 1s 3s;
}
a:hover {
background-color: red;
}
When the user hovers the link, the browser waits 3 seconds. Only when those seconds have passed does the background transition to red (in this case with a 1s transition time).
当用户悬停链接时，浏览器会等待 3 秒。只有当这些秒过去后，背景才会转换为红色（在这种情况下，转换时间为 1 秒）。
Here's a fiddle: http://jsfiddle.net/joplomacedo/VP7hE/
这是一个小提琴：http: //jsfiddle.net/joplomacedo/VP7hE/
回答by dsgriffin
Yes, you can use CSS3's transitionsto delay the :hovereffect.
是的，您可以使用 CSS3 的过渡来延迟:hover效果。
CSS transitions, which are part of the CSS3 set of specifications, provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
CSS 过渡是 CSS3 规范集的一部分，提供了一种在更改 CSS 属性时控制动画速度的方法。您可以使属性更改在一段时间内发生，而不是立即生效。例如，如果您将元素的颜色从白色更改为黑色，通常这种更改是即时的。启用 CSS 转换后，更改会按照加速曲线的时间间隔发生，所有这些都可以自定义。
In your case I believe you need to focus on the transition-delayproperty.
在您的情况下，我认为您需要关注transition-delay属性。
Here are a few useful links in regard to using transitions/example use cases:
以下是有关使用转换/示例用例的一些有用链接：
https://developer.mozilla.org/en-US/docs/CSS/transition-delay
https://developer.mozilla.org/en-US/docs/CSS/transition-delay
http://css-tricks.com/transition-delay-delays/
http://css-tricks.com/transition-delay-delays/
http://designshack.net/articles/css/create-stunning-effects-with-css-transition-delays/
http://designshack.net/articles/css/create-stunning-effects-with-css-transition-delays/
