如何向相邻的兄弟选择器添加转换延迟（仅限CSS）

Question

我有一个显示“无”的div。我希望在将鼠标悬停在其兄弟元素上1秒后显示此div>我目前正在CSS中使用transition-delay属性，但在使用相邻的兄弟选择器时它似乎不起作用。这是我目前的代码：

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

Answer 1

尝试这样的事情

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