Mouse hover delay, to show a child div

Question

Using CSS transitions, I'd like to add a delay on hover, of 0.5s, in the class "activator". After these 0.5s, it should change "content-l1" class from display:none to display:block

I've tried with this code, but doesn't work at all.

.content-l1 {
  transition: 0s display;
}

.activator:hover>.content-l1 {
  display: block;
  transition-delay: 0.5s;
}

<div class="activator">

  <div class="content-l1"> // initially: display:none whatever content here
  </div>

</div>

`display` is not an [animatable](https://www.w3schools.com/cssref/css_animatable.asp) CSS property. Consider using `opacity` and/or `visibility`. — Tyler Roper, Mar 07 '17 at 16:07
Possible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — APAD1, Mar 07 '17 at 16:08

Andrei Fedorov · Accepted Answer · 2017-03-07T16:19:38.647

display do not animation for transition. u can use opacity

.content-l1 {
  transition: 0s;
  opacity: 0;
}

.activator:hover>.content-l1 {
  opacity: 1;
  transition-delay: 0.5s;
}

<div class="activator">
  fjhfjh
  <div class="content-l1">
    afsfas
  </div>
</div>

but the block 'content-l1' takes place. we need use position

.activator {
  position: relative;
}

.content-l1 {
  position: absolute;
  background-color: white;
  padding: .4em;
  border: 1px solid black;
  transition: 0s;
  opacity: 0;
}

.activator:hover>.content-l1 {
  opacity: 1;
  transition-delay: 0.5s;
}

<div class="activator">
  fjhfjh
  <div class="content-l1">
    afsfas
  </div>
</div>
qwewertrtw

Mouse hover delay, to show a child div

1 Answers1