Transition hover div css

Question

I try to add a delay on a transition.

I have these rules :

#mydiv{
  z-index : 100;
  top : 50%;
  left : 50%; 
  -webkit-transition:width 1s, height 1s, background-color 1s ,-webkit-transform 1s, margin-left 1s;
  transition:width 1s, height 1s, background-color 1s, transform 1s, margin-left 1s;
}

#mydiv:hover{
  width : 700px;
  margin-left : -350px;
  text-align : left;
}

I know I can add "transition-delay" but I don't want a delay on hover but only when I quit the hover state.

I prefer to code it with css, not with JS ...

Any solution ?

You can't do that via CSS. Youse jQuery/JS. There's an event "onmouseleave", dont reinvent the wheel with CSS. — knitevision, Jun 28 '14 at 20:11
It's not to "reinvent the weel" I don't want to use JS for those kind of tricks. I think it's stupid to use JS for somethings that you can do in a better way in CSS, plus, better performances ! — Lombric, Jun 29 '14 at 11:06

score 3 · Accepted Answer · answered Jun 28 '14 at 20:05

Add transition-delay on #mydiv, then overwrite it on :hover.

#mydiv{
    z-index : 100;
    top : 50%;
    left : 50%; 
    -webkit-transition:width 1s, height 1s, background-color 1s ,-webkit-transform 1s, margin-left 1s;
    transition:width 1s, height 1s, background-color 1s, transform 1s, margin-left 1s;
    transition-delay: .5s;
}
#mydiv:hover{
    width : 700px;
    margin-left : -350px;
    text-align : left;
    transition-delay: 0;
}

Example fiddle:

http://jsfiddle.net/Sx2s5/

score 2 · Answer 2 · edited May 23 '17 at 12:29

2

I think you will find this answer a bit useful: CSS: opposite of :hover (on mouse leave)? CSS doesn't have a command for "unhovering" but you could attach what you want on the a.

edited May 23 '17 at 12:29

Community

1
1

answered Jun 28 '14 at 20:04

Gemtastic

6,253
6
34
53

score 2 · Answer 3 · answered Jun 28 '14 at 21:06

Here's a simpler way to do it without transition-delay: http://jsfiddle.net/v7BnQ/.

HTML:

<div id = "mydiv">Generic Division</div>

CSS:

body {
    overflow: hidden;
}

#mydiv{
    position: absolute;
    top : 50%;
    left : 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    -webkit-transition: all 2s;
    transition: all 2s;
}

#mydiv:hover{
    width : 700px;
    margin-left : -350px;
    text-align : left;
    transition-duration: 0s;
}

score 0 · Answer 4 · answered Jun 28 '14 at 20:08

0

Try to set this line on #mydiv : transition: all 0.5s linear; You will be able to feel a little delay when you quit the hover state on a link.

answered Jun 28 '14 at 20:08

Vinm

129
9

Transition hover div css

4 Answers4