CSS3 geçişleri ile mouseout/hover gecikmesi

Question

Vurguluyken boyutu değiştiren bir kutum var. Bununla birlikte, mouseout aşamasını geciktirmek istiyorum, böylece kutu eski boyutu geri almadan önce yeni boyutu birkaç saniye korur.

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

div:hover { 
    width:130px; 
} 

Bu, Javascript OLMADAN ve yalnızca CSS3 yapmak mümkün mü? Sadece webkit'u desteklemem gerekiyor.

Answer 1

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; 
} 

Bu, mouseover durumunu hemen tetikleyecek, ancak mouseout tetiklenene kadar 5 saniye bekleyecektir.

Fiddle

Answer 2

geçiş

transition: .5s all 5s 

olarak bildirilebilir daha sonra ayrı bir geçiş gecikme gerek yoktur (kısaltma, birinci sayı süresi, ikinci sayı gecikme)

Üzgünüz, yeterince işaret olmadığındanma yorum yapamazsınız