I have a menu in which onHover apears a infobox, telling what the button does. How can I apply a delay so that the box apears let's say one second after i put my mouse over the 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 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;
}
It's really pretty simple. Example:
a {
-webkit-transition: 1s 3s;
}
a:hover {
background-color: red;
}
When the user hovers the link, the browser waits 3 seconds. Only when those seconds have passed does the background transition to red (in this case with a 1s transition time).
Here's a fiddle: http://jsfiddle.net/joplomacedo/VP7hE/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With