悬停时显示按钮

我有一个角码可以显示特定日子的不同时间段。如果光标在它上面停留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>

来源

2017-08-23 BrianM

它将如何在移动设备？ – Vega

当前，这是针对非移动设备的 – BrianM

CSS“display”属性不能设置动画。如果您想纯粹使用CSS，则需要使用可见性。许多人在不透明度和可见度方面都进行了转变，其可见度滞后于不透明度，所以它整齐地淡入淡出。

来源

2017-08-23 11:07:09 diopside

太棒了！这工作，谢谢。 – BrianM

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

如果您有多个细分受众群，并且您想要删除某个具体的项目，那么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>

来源

2017-08-23 11:13:00 Neil

悬停时显示按钮

回答

相关问题