0

I want to display some child-element when hovering the parent container and then undisplay that child-element when hovering off.

Markup is something like

<div class="made_at">
<div class="visible_part">You can see me</div>
<div class="not_visible_part>You can't see me when not hovering<div>
<div>

and CSS is something like

.made_at {
    transition: 0.5s;
}

.made_at:hover {
    transition-delay: 0s;
    margin-top: -250px;
}

.made_at:not(:hover) {
    transition-delay: 1.8s;
}

.not_visible_part {
    display: none;
}
.made_at:hover .not_visible_part {
    display: block;
}

So the block indeed doesn't get displayed initially but afte rhovering and it correctly "hides" again when hovering off but very unrythimque. What I want is that when hovering off, afte rthe correct delay of 1.8s the margin-top (the 250px is the exact height of the not_visible_part-Block) transitions back to 0 in a linear way for the transition time of 0.5s.

How can I achieve that?

Daiaiai
  • 1,019
  • 3
  • 12
  • 28
  • 1
    You can't transition `display` property. – Terry Jan 02 '20 at 10:54
  • Oh right! That already helped. I erased display:none completely and therefore set a max-height and overflow:hidden to the parent element and a bigger max-height value to the hover-state of it and that was it. Thanks! – Daiaiai Jan 02 '20 at 11:03

0 Answers0