CSS에서 : hover 효과를 어떻게 지연시킬 수 있습니까?

CSS에서 : hover 효과를 어떻게 지연시킬 수 있습니까?

---

JavaScript를 사용하지 않고 : Hover 이벤트를 지연시키는 방법이 있습니까? 애니메이션을 지연시키는 방법이 있다는 것을 알고 있지만 : hover 이벤트 지연에 대해서는 아무것도 보지 못했습니다.

나는 메뉴와 같은 어리석은 물고기를 만들고있다. 추가 JS 가중치를 추가하지 않고 hoverIntent가 수행하는 작업을 시뮬레이션하고 싶습니다. 나는 이것을 점진적 향상으로 취급하고 JS를 메뉴 사용에 대한 요구 사항으로 만드는 것을 선호하지 않습니다.

메뉴 마크 업의 예 :

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

다음은 전체 데모입니다. http://jsfiddle.net/aEgV3/

---

:hover효과가 CSS 기반 인 경우 전환을 사용하여 원하는 효과 를 지연 할 수 있습니다 .

예를 들면

div{
    transition: 0s background-color;
}

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

이렇게하면 1 초 동안 호버 효과 ( 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>

---

Vendor Specific Extentions for Transitions and W3C CSS3 transitions

---

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

This will add a transition delay, which will be applicable to almost every browser..

---

For a more aesthetic appearance :) can be:

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

position for .sNv2 .nav UL can be replaced by z-index:-1 and z-index:1 for .sNv2 .nav LI:Hover UL

참고URL : https://stackoverflow.com/questions/8566090/how-can-i-delay-a-hover-effect-in-css