html - Delaying :hover using CSS? -
this question has answer here:
- delay :hover in css3? 3 answers
i have menu in onhover apears infobox, telling button does. how can apply delay box apears let's 1 second after put mouse on button?
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 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 display 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; }
it's pretty simple. example:
a { -webkit-transition: 1s 3s; } a:hover { background-color: red; } when user hovers link, browser waits 3 seconds. when seconds have passed background transition red (in case 1s transition time).
here's fiddle: http://jsfiddle.net/joplomacedo/vp7he/
Comments
Post a Comment