Tôi muốn áp dụng sự chậm trễ trên con chuột ra trong css

Question

Tôi đang cố gắng áp dụng một sự chậm trễ trước khi bắt đầu chuyển tiếp CSS trên sự kiện di chuột. Mã CSS của tôi ở bên dưới, hãy cho tôi biết cách áp dụng thời gian trễ trước khi bắt đầu chuyển đổi CSS khi di chuột.

Tôi muốn đạt được rằng menu vẫn ổn định trong một thời gian (ví dụ: 3 giây) sau khi người dùng di chuyển con trỏ chuột ra khỏi menu.

.timnav li .dropdown { 
    width: auto; 
    min-width: 0px; 
    max-width: 230px; 
    height: 0; 
    position: absolute; 
    overflow: hidden; 
    z-index: 999; 
    background:rgba(255, 255, 255, 0.8); 
    } 

.timnav li:hover .dropdown { 
    min-height: 60px; 
    max-height: 500px; 
    height: auto; 
    width: 100%; 
    padding: 0; 
      -webkit-transition: delay .5s ease-in-out; 
     -moz-transition: delay .5s ease-in-out; 
     -o-transition: delay .5s ease-in-out; 
} 

.timnav li .dropdown ul { 
    margin: 0; 
    margin-top:7px; 


} 

.timnav li .dropdown ul > li { 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 
    padding-bottom:2px; 
} 


    .timnav li .dropdown .dropdown2{ 
    display: none; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 
} 

    .timnav li .dropdown ul > li:hover .dropdown2{ 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 

} 

    .timnav li .dropdown .dropdown2:hover { 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 


} 


    .timnav li .dropdown .dropdown2 li a { 
    display: block; 
    padding-left:7px !important; 
    height:6 !important; 
    padding-top:8px; 
    background: url(../images/nav-bg.jpg) repeat; color:#fff; 

} 


.timnav li .dropdown ul > li a { 
    display: block; 
    line-height: 26px; 
    height: 22px; 
    padding: 10px; 
    background: url(../images/nav-crrent.jpg) repeat; color:#FFFFFF; 

} 

.timnav ul .dropdown ul li:first-child a { 
    border-radius: 0; 
} 

.timnav li .dropdown li a:hover { 
    background: url(../images/nav-bg.jpg) repeat; color:#000; 
} 

Answer 1

Bạn có thể thêm một sự chậm trễ đến một sự chuyển tiếp, cú pháp như sau:

transition: all 0.5s ease-in-out 3s; 

Vì vậy

transition: <property> <duration> <timing-function> <delay>; 

Cú pháp là như nhau cho tất cả các tiền tố cũng có phiên bản.

Tôi đã tạo bản trình diễn này, bởi vì bạn cần phải làm điều gì đó hơi phức tạp để làm cho mục đó xuất hiện không chậm trễ, nhưng hãy trì hoãn trước khi nó xuất hiện.

http://jsfiddle.net/pgqM2/

Bí quyết là để tái xác định quá trình chuyển đổi để thêm sự chậm trễ 3s khi không có di chuột, nhưng để có một sự chậm trễ 0s khi có một di chuột:

li ul { 
    opacity: 0; 
    transition: all 0.5s ease 3s; 
} 

li:hover ul { 
    opacity: 1; 
    transition: all 0.5s ease 0s; 
} 

Answer 2

Có thuộc tính transition-delay trong CSS. Chỉ cần thêm mã này vào mã của bạn và bạn sẽ nhận được hiệu ứng mong muốn.

transition-delay:3s; 

Với mục đích thuộc tính chuyển đổi tốc ký, đây là một hình ảnh mà tiền nó lên

Vì vậy, trong trường hợp của bạn nó sẽ trông như thế này

div:hover { 
 
    -webkit-transition: .5s ease-in-out 3s; 
 
    -moz-transition: .5s ease-in-out 3s; 
 
    -o-transition: .5s ease-in-out 3s; 
 
    transition: .5s ease-in-out 3s; 
 
    color: red; 
 
    cursor: pointer; 
 
}

<div>Hover me. There is a delay!</div>

Đây là một fiddle để chứng minh

Answer 3

Bạn có thể sử dụng thuộc tính css3 transition-delay để trì hoãn thực thi css. Nhấp vào "Tự thử" để xem ví dụ.

Answer 4

Bạn không thể sử dụng chuyển tiếp css khi sử dụng hiển thị không, chỉ giải pháp có display none là js.