时间戳

首页 > 解决方案 > 如何将转换延迟添加到相邻的兄弟选择器（仅限 CSS）

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

问题描述

我有一个显示为“无”的 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;
    }

标签： htmlcss

解决方案

尝试这样的事情

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

推荐阅读