Delaying :hover using CSS?

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

score 5 · Answer 1 · answered Mar 24 '13 at 19:08

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/

dsgriffin · Answer 2 · 2013-03-24T19:03:09.383

1

Yes, you can use CSS3's transitions 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 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/

edited Mar 24 '13 at 19:03

answered Mar 24 '13 at 17:47

dsgriffin

66,495
17
137
137

thank you for your answer...i found this solution but it doesn't do anything – AlesSvetina Mar 24 '13 at 17:58
1

@AlesSvetina Which browser are you using? Did you try looking at the examples I linked to? It should work.. – dsgriffin Mar 24 '13 at 17:58
I'm using Chrome. I tried in IE and it also doesn't work – AlesSvetina Mar 24 '13 at 18:01
1

@AlesSvetina It doesn't work in IE but should in Chrome, did you look at the document I linked to you about -webkit-transition, -moz-transiton etc? – dsgriffin Mar 24 '13 at 18:02
yes i did...I don't quite get it...i tried with -webkit-...i guess I'm trying to delay the display part of td.info? – AlesSvetina Mar 24 '13 at 18:06
@AlesSvetina I don't know which bit you are trying to delay, the td.info:hover or the td.info:hover span – dsgriffin Mar 24 '13 at 18:07
the span...the appearance of the little pop-up info box – AlesSvetina Mar 24 '13 at 18:08
@AlesSvetina In that case change the CSS I did above accordingly to the correct selectors, and try the -webkit-transition too and it should work – dsgriffin Mar 24 '13 at 18:09
not working :/ i'm new to this...i edited the css part of the code to what it looks like now – AlesSvetina Mar 24 '13 at 18:12
@AlesSvetina Can you create a quick jsFiddle using your html and css so I can see why? Your code doesn't seem to do anything on hover – dsgriffin Mar 24 '13 at 18:18
http://jsfiddle.net/WGMV4/ – AlesSvetina Mar 24 '13 at 18:20
does it work for you? It works for me...just not the delay part – AlesSvetina Mar 24 '13 at 18:35
@AlesSvetina Sadly I can't in this case - maybe try googling 'CSS transition delay' as there are many examples of it working, maybe you're missing something in the code (I haven't really used this feature myself, but have seen it used to do what you want to have) – dsgriffin Mar 24 '13 at 18:56
1

w3 schools changed the link to `http://www.w3schools.com/css/css3_transitions.asp` (removed the 3 on `/css/` and since its 1 character SO wont let me correct it :) – hahaha Aug 08 '14 at 09:23
You can not do this, you will have to find a way around because "display" is not animatable, check the w3schools website and it will tell you – Provision Nov 05 '14 at 03:11

Delaying :hover using CSS?

2 Answers2