使用 CSS 延迟 :hover 效果？

Question

我是一个有用的助手，可以将文本翻译成中文。

我有一个菜单，在其中当鼠标悬停在按钮上时会出现一个信息框，告诉用户该按钮的作用。如何应用延迟，让信息框在我把鼠标放在按钮上一秒钟后才出现？

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：

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;
                            }

- AlesSvetina

Answer 1

这其实是非常简单的。例如：

a {
    -webkit-transition: 1s 3s;
}

a:hover {
    background-color: red;
}

当用户将鼠标悬停在链接上时，浏览器会等待3秒钟。只有等过了这几秒钟，背景才会转变为红色（在此情况下，转换时间为1秒）。 这里有一个示例：http://jsfiddle.net/joplomacedo/VP7hE/。

- João Paulo Macedo

Answer 2

是的，您可以使用CSS3的转换效果来延迟:hover效果。

CSS转换效果是CSS3规范中的一部分，它提供了一种控制更改CSS属性时动画速度的方法。您可以使属性更改在一段时间内发生，而不是立即生效。例如，如果您将元素的颜色从白色更改为黑色，通常情况下更改是瞬间发生的。启用CSS转换效果后，更改会按照一个加速曲线的时间间隔发生，所有这些都可以自定义。

在您的情况下，我认为您需要关注transition-delay属性。

以下是有关使用转换/示例用例的一些有用链接：

https://developer.mozilla.org/en-US/docs/CSS/transition-delay

http://css-tricks.com/transition-delay-delays/

http://designshack.net/articles/css/create-stunning-effects-with-css-transition-delays/

- dsgriffin

---

@AlesSvetina 你用的是哪个浏览器？你试过看我链接的例子吗？应该可以工作的。 - dsgriffin

@AlesSvetina 在IE中不起作用，但在Chrome中应该可以，你看过我给你链接的关于-webkit-transition，-moz-transition等的文档了吗？ - dsgriffin

更改 span 元素的样式以改变小弹出信息框的外观。 - AlesSvetina

@AlesSvetina 能否创建一个快速的 jsFiddle，使用你的 HTML 和 CSS，这样我就能看到问题出在哪里了吗？您的代码在悬停时似乎没有任何动作。 - dsgriffin

w3 schools将链接更改为http://www.w3schools.com/css/css3_transitions.asp（在/css/上删除了3，由于它只是1个字符，因此SO不允许我更正 :)）。 - hahaha