Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Delaying :hover using CSS? [duplicate]

Tags:

html

css

hover

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;
                            }
like image 600
AlesSvetina Avatar asked May 11 '26 10:05

AlesSvetina


1 Answers

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/

like image 151
João Paulo Macedo Avatar answered May 13 '26 01:05

João Paulo Macedo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!