Question: 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;
                            }

```

Answer: 
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/>
Yes, you can use CSS3's [transitions](http://www.w3schools.com/css3/css3_transitions.asp) to delay the `:hover` effect.

> 
> CSS transitions, which are part of the CSS3 set of specifications,
>  provide a way to control animation speed when changing CSS properties.
>  Instead of having property changes take effect immediately, you can
>  cause the changes in a property to take place over a period of time.
>  For example, if you change the color of an element from white to
>  black, usually the change is instantaneous. With CSS transitions
>  enabled, changes occur at time intervals that follow an acceleration
>  curve, all of which can be customized.
> 
> 
> 

In your case I believe you need to focus on the [transition-delay](https://developer.mozilla.org/en-US/docs/CSS/transition-delay) property.

Here are a few useful links in regard to using transitions/example use cases:

<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/>