How to add transition delay to adjacent sibling selector (CSS only)

Question

I have a div with a display of 'none'. I want this div to display after I hover over its sibling element for 1 second> I am currently using the transition-delay property in CSS but it doesn't seem to work when using the adjacent sibling selector. Here is my current code:

HTML

<i id="pass" style="font-size: 30px; width: 50px" class="fa fa-users fa-3" aria-hidden="true"></i>
<div class="speech-bubble" id="pass_hover">
     <h1>2+ Passenger Seating</h1>
</div>

CSS

.speech-bubble {
        display: none;
    }

#pass:hover + #pass_hover {
        transition-delay:1s;
        display: block;
    }

You cannot `transition` the `display` property. What would it even mean, for example, to `transition` between `block` and `inline`? — Niet the Dark Absol, May 20 '18 at 12:07
I was able to get it working by using visibility instead of display — Arthur Bello, May 20 '18 at 12:37

score 0 · Answer 1 · answered May 20 '18 at 12:17

Try something like this

<i id="pass" style="font-size: 30px; width: 50px" class="fa fa-users fa-3" aria-hidden="true"></i>
<div class="speech-bubble" id="pass_hover">
     <h1>2+ Passenger Seating</h1>
</div>

.speech-bubble:after {
        height :0;
    }

#pass + #pass_hover {
        transition: all 1s;
        transition-delay:.1s;
        height: 0;
        width: 0;
        opacity:0;
    }
#pass:hover + #pass_hover {
        transition-delay:.1s;
        display: block;
        height: 100%;
        width:100%;
        opacity : 1;
    }

How to add transition delay to adjacent sibling selector (CSS only)

1 Answers1