title: Delaying :hover using CSS?
body: <p>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?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;td class="info"&gt;&lt;a id="login-edit_account" href="../login-edit_account.php"&gt;Edit account&lt;span&gt;&lt;div id="pointer"&gt;&lt;/div&gt;&lt;p style="font-size:11px"&gt;Edit user's information.&lt;/p&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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;
                              }
  </code></pre>