Задержка: наведите курсор на CSS3?

есть ли способ задержать событие: Hover без использования javascript? Я знаю, что есть способ отложить анимацию, но я ничего не видел при задержке события :Hover.

редактировать...

Извините, я должен был включить это для начала... Я создаю меню типа "сукин сын". Я хотел бы имитировать то, что делает hoverIntent, не добавляя дополнительный вес JS. Я бы предпочел рассматривать это как прогрессивное улучшение и не делать JS a требование к использованию меню.

Обновлено

вот окончательный код... http://jsfiddle.net/aEgV3/

Спасибо за помощь!

3 56
css css3 hover delay

3 ответа:

хорошо.. вы можете использовать переходы для задержки :hover эффект, который вы хотите, если эффект основан на CSS..

div{
    transition: 0s background-color;
}

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

это задержит применение эффектов наведения (background-color в этом случае) на одну секунду.

демонстрация задержки при наведении и выключении на http://dabblet.com/gist/1498443

демонстрация задержки только при наведении на at http://dabblet.com/gist/1498446

расширения для конкретных поставщиков для переходов и переходы W3C CSS3

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

это добавит задержку перехода, которая будет применима почти к каждому браузеру..

5

для более эстетичного вида :) может быть:

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

положение .sNv2 .nav UL можно заменить на z-index:-1 и z-index:1 на .sNv2 .nav LI:Hover UL

0