使用CSS3轉換延遲mouseout /懸停

我有一個在懸停時更改大小的框。但是，我想延遲鼠標移出階段，以便在將舊尺寸恢復之前，該框會將新尺寸保持幾秒鐘。使用CSS3轉換延遲mouseout /懸停

div { 
    width: 70px; 
    -webkit-transition: .5s all;  
} 

div:hover { 
    width:130px; 
}

這是可以做到沒有Javascript和只有CSS3？我只需要關心支持webkit。

來源

2012-02-22 patad

你嘗試過CSS3動畫屬性？我已經嘗試了一些動畫屬性的東西，但我不確定這是你想要的。但如果你想我可以給你。 – Shabib 2012-02-22 11:01:41

div { 
    width: 70px; 
    -webkit-transition: .5s all; 
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all; 
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all; 
    -ms-transition-delay: 5s; 
    -o-transition: .5s all; 
    -o-transition-delay: 5s; 
    transition: .5s all; 
    transition-delay: 5s; 
} 

div:hover { 
    width:130px; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    transition-delay: 0s; 
}

這將立即觸發鼠標懸停狀態，但等待5秒，直到鼠標被觸發。

Fiddle

來源

2012-02-22 11:47:11 patad

編輯添加的非WebKit的前綴太 - 這是對「格」標籤的定義，是不是僅指定好的做法 – 2012-02-22 16:06:32

「轉型」和「過渡延遲」本質上是一個重複？轉換規格的第一個值是延遲值，不是？ – Screenack 2013-04-26 21:02:21

@Screenack不，第一個值是轉換的持續時間 - 一旦它完成，需要多長時間才能完成。 – Sandwich 2015-01-10 21:22:59

過渡可以聲明爲

transition: .5s all 5s

（簡寫，第一個數字是時間，第二個數字是延遲）那麼你並不需要單獨的過渡延遲

對不起，不能添加的評論，因爲我沒有足夠的積分

來源

2015-05-05 16:39:03 Jenny

使用CSS3轉換延遲mouseout /懸停

回答

相關問題