Question

我有角度代码，显示特定日期的不同时间段。如果光标在它上面悬停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'display'属性不可动画。如果您想纯粹使用CSS，则需要使用可见性。很多人都设置了不透明度和可见度的过渡，可见度落后于不透明度，所以它整齐地淡入和淡出视野。

Answer 2

这里，删除按钮必须在您的时间段中，以便您的CSS工作。这可以用纯css完成，但我们必须至少知道父div，否则每个段必须有一个删除。

如果你有多个细分，并且你想要删除一个特定的on，也许javascript会更友好，有角度它可以很简单。

.delete-button {
    opacity : 0.2;
}
        
.time-segment:hover .delete-button{
     opacity: 1;
     transition: opacity 3s cubic-bezier(1,0,1,0);
}

<div class="time-segment">
  hover me
  <button class="delete-button">delete</button>
</div>

悬停时显示延迟按钮

2 个答案: