2011-12-19 39 views
51

Có cách nào để trì hoãn sự kiện: Di chuột không sử dụng javascript không? Tôi biết có một cách để trì hoãn hoạt ảnh, nhưng tôi chưa thấy bất cứ điều gì về việc trì hoãn sự kiện: Di chuột.Trì hoãn: Di chuột trong CSS3?

Sửa ...

Xin lỗi, tôi nên tôi đã bao gồm này để bắt đầu với ... Tôi đang xây dựng một con trai-of-Suckerfish như menu. Tôi muốn mô phỏng những gì hoverIntent làm mà không cần thêm trọng lượng JS thêm. Tôi muốn coi đây là một sự nâng cao tiến bộ và không làm cho JS trở thành một yêu cầu cho việc sử dụng menu.

Cập nhật

Đây là mã cuối cùng ... http://jsfiddle.net/aEgV3/

Cảm ơn tất cả sự giúp đỡ!

+1

Thú vị câu hỏi, nhưng tôi nghĩ rằng 'Không; không phải không có JavaScript 'có thể là câu trả lời, thật không may. –

Trả lời

107

Vâng .. bạn có thể sử dụng hiệu ứng chuyển tiếp để trì hoãn việc hiệu quả :hover bạn muốn, nếu phát huy tác dụng CSS dựa ..

Ví dụ

div{ 
    transition: 0s background-color; 
} 

div:hover{ 
    background-color:red;  
    transition-delay:1s; 
} 

này sẽ trì hoãn việc áp dụng các hiệu ứng chuyển động (background-color trong trường hợp này là) trong một giây.


Demo của sự chậm trễ trên cả di chuột và tắt tại http://dabblet.com/gist/1498443

Demo của sự chậm trễ chỉ trên di chuột trên tại http://dabblet.com/gist/1498446


Vendor Specific Extentions for TransitionsW3C CSS3 transitions

+1

Bạn có thể muốn thêm tiền tố trình duyệt vào câu trả lời của bạn để hoàn thành. – ThinkingStiff

+0

@ThinkingStiff, điểm tốt .. Thêm tham chiếu đến MDN –

+0

Tôi đã cập nhật câu hỏi của mình ... Tôi không chắc liệu chuyển tiếp có hoạt động trong trường hợp của tôi hay không. Tôi có menu phụ vị trí của màn hình và được đặt trở lại tại chỗ trên di chuột. –

0

Đối với một diện mạo thẩm mỹ hơn :) có thể là:

left:-9999em; 
top:-9999em; 

vị trí cho .sNv2 .nav UL có thể được thay thế bằng z-index:-1z-index:1 cho .sNv2 .nav LI:Hover UL

4
div { 
    background: #dbdbdb; 
    -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 { 
    background:#5AC900; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    transition-delay: 0s; 
} 

này sẽ thêm một sự chậm trễ chuyển tiếp, mà sẽ được áp dụng cho hầu hết các trình duyệt ..