添加透明度懸停在一個div上，但有時間延遲

我希望我的div在光標懸停後1秒變得部分透明。當不再徘徊時，我希望它立即返回到其默認的全透明度，而不會有任何時間延遲。我知道非常非常JavaScript，所以我不知道如何做到這一點。添加透明度懸停在一個div上，但有時間延遲

任何幫助提前感激感謝

2016-12-25 Usman Sikander

這延遲可能對於用戶體驗是不好的，爲什麼你想要它的原因嗎？話雖如此，這個問題之前已經被問及在這裏得到了很好的回答，你可以使用hoverintent插件來實現它：http://stackoverflow.com/questions/435732/delay-jquery-hover-event –

@NathanielFlick那個延遲很好在這種情況下，相信我，但你可以幫助 –

是的，我更新了我的答案上面。請記住，延遲懸停在移動設備上無法使用，因爲它們沒有「懸停」狀態，只能觸摸/點擊。 –

其實，你不應該在這種情況下，用js。 CSS Transitions會更好，因爲它們比js/jQuery動畫更平滑更高效。

下面舉例說明懸停時間延遲2秒。

.btn{ 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    background: rgba(0,0,0,1); 
 
    color: #fff; 
 
    text-decoration: none; 
 
    -webkit-transition: background 0.5s ease 0s; 
 
    transition: background 0.5s ease 0s; 
 
} 
 
.btn:hover{ 
 
    -webkit-transition: background 0.5s ease 2s; 
 
    transition: background 0.5s ease 2s; 
 
    background: rgba(0,0,0,0.5); 
 
}

<a href="#" class="btn">Text</a>

來源

2016-12-25 12:00:16 Kuba

添加透明度懸停在一個div上，但有時間延遲

回答

相關問題