延迟：悬停使用CSS？ [复制]

Posted 2023-05-08

【中文标题】延迟：悬停使用CSS？ [复制]

【英文标题】：Delaying :hover using CSS? [duplicate]

【发布时间】：2013-03-14 04:06:05

【问题描述】：

我有一个菜单，其中 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;
                            

【参考方案1】：

这真的很简单。示例：

a 
    -webkit-transition: 1s 3s;


a:hover 
    background-color: red;

当用户悬停链接时，浏览器会等待 3 秒。只有当这些秒过去后，背景才会变为红色（在这种情况下，过渡时间为 1 秒）。

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

【参考方案2】：

是的，您可以使用 CSS3 的 transitions 来延迟 :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/

【讨论】：

感谢您的回答...我找到了这个解决方案，但它什么也没做

@AlesSvetina 您使用的是哪种浏览器？您是否尝试查看我链接到的示例？它应该工作..

我正在使用 Chrome。我在 IE 中试了，还是不行

@AlesSvetina 它在 IE 中不起作用，但在 Chrome 中应该起作用，您看过我链接到您的关于 -webkit-transition、-moz-transiton 等的文档吗？

w3 学校将链接更改为 http://www.w3schools.com/css/css3_transitions.asp（删除了 /css/ 上的 3 并且因为它的 1 个字符所以不会让我更正它：）