지연 마우스 오버시 Menu Hover에서

Question

나는 RocketTheme Joomla 템플릿을 사용했습니다.

나는 메뉴 가져 오기를 지연하려고합니다.

메뉴 호버에서 지연을 위해 CSS를 사용하고 싶습니다. 그리고 효과가 있습니다. www.test2.guru99.com/

.gf-menu li .dropdown { 
transition: opacity 5.0s ease-out 0.0s; 
} 

내 요구 사항입니다 - - 마우스가 여전히 초 동안 표시 메뉴를 이동할 때 링크를 확인하시기 바랍니다.

내 사이트 URL입니다 - www.test2.guru99.com/

도와주세요!

Answer 1

전환 : [animationTime] delayTime] ...

li > ul{ 
 
    visibility:hidden; 
 
    opacity:0; 
 
    transition: 0.5s 2s; /* put the mouseleave wait time here */ 
 
} 
 
li:hover > ul{ 
 
    visibility:visible; 
 
    opacity:1; 
 
    transition: 0.5s 0s; /* put the mouseenter wait time here */ 
 
}

<ul> 
 
    <li> 
 
    <a>List item (will take 2sec to fade out)</a> 
 
    <ul> 
 
     <li><a>Sub-List item 1</a></li> 
 
     <li><a>Sub-List item 2</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

는

mouseenter에 :hover 트리거되며, 0s (지연 없음)의 transition delay 규칙 거기 .
mouseleave에서 초기 규칙이 사용됩니다 (2s 지연).