如何在 CSS 中延迟: 悬停效果？

有没有不使用 JavaScript 延迟: Hover 事件的方法？我知道有一种方法可以延迟动画，但我没有看到任何延迟: 悬停事件。

我正在做一个像菜单一样的菜单。我想模拟 hoverInent 在不添加额外 JS 权重的情况下所做的工作。我更愿意把它当作一个渐进增强，而不是把 JS 作为使用菜单的必要条件。

菜单标记示例:

<div>
<div>
<ul>
<li><a href="#">
<ul>
<li></li>
<li></li>
</ul>
</li>
<li>
<li>
</ul>
</div>
</div>

这里是完整的演示: http://jsfiddle.net/aEgV3/

237887 次浏览
小开
最佳答案

You can use transitions to delay the :hover effect you want, if the effect is CSS-based.

For example 

div{
transition: 0s background-color;
}


div:hover{
background-color:red;
transition-delay:1s;
}

this will delay applying the the hover effects (background-color in this case) for one second.

Demo of delay on both hover on and off:

div{
display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
transition-delay:1s;
}
div:hover{
background-color:red;
}
<div>delayed hover</div>

Demo of delay only on hover on:

div{
display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
}
div:hover{
background-color:red;
transition-delay:1s;
}
<div>delayed hover</div>

Vendor Specific Extentions for Transitions and W3C CSS3 transitions

小开

For a more aesthetic appearance :) can be:

left:-9999em;
top:-9999em;

position for .sNv2 .nav UL can be replaced by z-index:-1 and z-index:1 for .sNv2 .nav LI:Hover UL

小开 
div {
background: #dbdbdb;
-webkit-transition: .5s all;
-webkit-transition-delay: 5s;
-moz-transition: .5s all;
-moz-transition-delay: 5s;
-ms-transition: .5s all;
-ms-transition-delay: 5s;
-o-transition: .5s all;
-o-transition-delay: 5s;
transition: .5s all;
transition-delay: 5s;
}


div:hover {
background:#5AC900;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

This will add a transition delay, which will be applicable to almost every browser..


提交答案