Is there a way to delay the :Hover event without using JavaScript? I know there is a way to delay animations, but I haven't seen anything on delaying the :hover event.
I'm building a son-of-suckerfish like menu. I'd like to simulate what hoverIntent does without adding the extra JS weight. I'd prefer to treat this as a progressive enhancement and not make JS a requirement for using the menu.
Example of menu markup:
<div>
<div>
<ul>
<li><a href="#">
<ul>
<li></li>
<li></li>
</ul>
</li>
<li>
<li>
</ul>
</div>
</div>
Here is the full demo: http://jsfiddle.net/aEgV3/
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..
Source: Stackoverflow.com