it-swarm-pt.tech

Como posso atrasar um efeito: hover no CSS?

Existe uma maneira de atrasar o evento: Hover sem usar JavaScript? Eu sei que há uma maneira de atrasar animações, mas eu não vi nada em retardar o evento: hover.

Eu estou construindo um cardápio de filho-de-suckerfish. Eu gostaria de simular o que hoverIntent faz sem adicionar o peso JS extra. Eu prefiro tratar isso como um aprimoramento progressivo e não tornar o JS obrigatório para usar o menu.

Exemplo de marcação de menu:

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

Aqui está a demonstração completa: http://jsfiddle.net/aEgV3/

59
Adam Youngers

Você pode usar transições para atrasar o efeito :hover desejado, se o efeito for baseado em CSS.

Por exemplo

div{
    transition: 0s background-color;
}

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

isso atrasará a aplicação dos efeitos de hover (background-color neste caso ) por um segundo.


Demonstração do atraso nos dois pontos:

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>

Demo de atraso apenas ao passar o mouse:

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>

Extensões Específicas do Fornecedor para Transições e transições W3C CSS

126
Gabriele Petrioli
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;
}

Isso adicionará um atraso de transição, que será aplicável a quase todos os navegadores.

8
Shailesh kala

Para uma aparência mais estética :) pode ser:

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

a posição para .sNv2 .nav UL pode ser substituída por z-index:-1 e z-index:1 para .sNv2 .nav LI:Hover UL

0
Колян Чернышов