懸停時顯示按鈕

我有一個角碼可以顯示特定日子的不同時間段。如果光標在它上面停留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

懸停時顯示按鈕

回答

相關問題