Как я могу отложить эффект: hover в CSS?

Question

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

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

Пример разметки меню:

<div>
    <div>
        <ul>
            <li><a href="#">
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>
            <li>
        </ul>
    </div>
</div>

Вот полная демонстрация: http://jsfiddle.net/aEgV3/

Answer 1

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

Например

div{
    transition: 0s background-color;
}

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

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

---

Демонстрация задержки при включении и выключении:

div{
    display:inline-block;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    transition: 0s background-color;
    transition-delay:1s;
}
div:hover{
    background-color:red;
}

<div>delayed hover</div>

Демо задержки только при наведении на:

div{
    display:inline-block;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    transition: 0s background-color;
}
div:hover{
    background-color:red;    
    transition-delay:1s;
}

<div>delayed hover</div>

---

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

Answer 2

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

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

Answer 3

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

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

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