延迟:使用CSS悬停？

Question

我有一个菜单,其中onHover显示一个信息框,告诉按钮的作用.我如何应用延迟,以便在我将鼠标放在按钮上之后让盒子说出一秒钟？

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

Answer 1

这真的很简单.例:

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

a:hover {
    background-color: red;
}

当用户悬停链接时,浏览器会等待3秒钟.只有当那些秒已经过去时,背景才会转换为红色(在这种情况下,转换时间为1秒).

这是一个小提琴:http://jsfiddle.net/joplomacedo/VP7hE/