html - 悬停时延迟显示按钮

Question

我有 Angular 代码显示特定日期的不同时间段。如果光标悬停在段上 2 秒，我希望删除按钮出现在段上。我尝试了一些不同的东西，但我似乎无法让它工作

.delete-button {
    display: none;
    transition: all 3s ease;
}
        
.time-segment:hover .delete-button{
     display: block;
     transition-delay: 3s;
}

<button class="delete-button">delete</button>

Answer 1

CSS 的“显示”属性不可设置动画。如果您想纯粹使用 CSS，则需要使用可见性。许多人在不透明度和可见性上都设置了过渡，可见性略微落后于不透明度，因此它巧妙地淡入淡出。