web-dev-qa-db-fra.com

Comment puis-je retarder un effet de survol en CSS?

Est-il possible de retarder l'événement: Hover sans utiliser JavaScript? Je sais qu'il existe un moyen de retarder les animations, mais je n'ai rien vu sur le fait de retarder l'événement: hover.

Je construis un menu de type fils de suckerfish. J'aimerais simuler ce que fait hoverIntent sans ajouter le poids supplémentaire JS. Je préférerais traiter cela comme une amélioration progressive et ne pas faire de JS une condition préalable à l'utilisation du menu.

Exemple de balisage de menu:

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

Voici la démo complète: http://jsfiddle.net/aEgV3/

csshoverdelay
61
Adam Youngers

Vous pouvez utiliser des transitions pour retarder le :hover effet que vous voulez, s'il est basé sur CSS.

Par exemple

div{
    transition: 0s background-color;
}

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

cela retardera l'application des effets de survol (background-color _ dans ce cas ) pendant une seconde.

Démo de retard sur le vol stationnaire:

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>

Démo de retard uniquement en survol sur:

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>

Extensions propres au fournisseur pour les transitions et Transitions CSS3 du W3C

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

Cela ajoutera un délai de transition, qui sera applicable à presque tous les navigateurs.

8
Shailesh kala

Pour un aspect plus esthétique :) peut être:

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

position pour .sNv2 .nav UL peut être remplacé par z-index:-1 et z-index:1 pour .sNv2 .nav LI:Hover UL

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