Je Veux Appliquer Retard Sur la Souris dans le css

Je suis en train d'appliquer un retard avant de commencer une transition CSS sur la souris en dehors de l'événement. Mon code CSS est ci-dessous, s'il vous plaît laissez-moi savoir comment appliquer le délai avant de transition CSS sur la souris commence.

Je veux réaliser que le menu reste stable pendant un certain temps (par exemple, pour 3 secondes) une fois que l'utilisateur déplace le pointeur de la souris le menu.

.timnav li .dropdown {
width: auto;
min-width: 0px;
max-width: 230px;
height: 0;
position: absolute;
overflow: hidden;
z-index: 999;
background:rgba(255, 255, 255, 0.8);
}
.timnav li:hover .dropdown {
min-height: 60px;
max-height: 500px;
height: auto;
width: 100%;
padding: 0;
-webkit-transition: delay .5s ease-in-out;
-moz-transition: delay .5s ease-in-out;
-o-transition: delay .5s ease-in-out;
}
.timnav li .dropdown ul {
margin: 0;
margin-top:7px;
}
.timnav li .dropdown ul > li {
display: block;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none;
padding-bottom:2px;
}
.timnav li .dropdown  .dropdown2{
display: none;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none; 
}
.timnav li .dropdown ul > li:hover .dropdown2{
display: block;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none;
}
.timnav li .dropdown .dropdown2:hover {
display: block;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none;
}
.timnav li .dropdown .dropdown2 li a {
display: block;
padding-left:7px !important;
height:6 !important;
padding-top:8px;
background: url(../images/nav-bg.jpg) repeat; color:#fff;
}
.timnav li .dropdown ul > li a {
display: block;
line-height: 26px;
height: 22px;
padding: 10px;
background: url(../images/nav-crrent.jpg) repeat; color:#FFFFFF;
}
.timnav ul .dropdown ul li:first-child a {
border-radius: 0;
}
.timnav li .dropdown li a:hover {
background: url(../images/nav-bg.jpg) repeat; color:#000;
}

OriginalL'auteur Tim John | 2013-04-24

  1. 21

    Vous pouvez ajouter un délai d'une transition, la syntaxe est comme suit:

    transition: all 0.5s ease-in-out 3s;

    Donc

    transition: <property> <duration> <timing-function> <delay>;

    La syntaxe est la même pour toutes les versions préfixées aussi.

    J'ai créé une démo de ce, parce que vous avez besoin de faire quelque chose d'un peu délicat dans le but de faire l'objet, sans délai, mais le retard avant qu'il aille.

    http://jsfiddle.net/pgqM2/

    Le truc, c'est de re-définir la transition à ajouter les 3s retard quand il n'est pas stationnaire, mais d'avoir une 0s retard quand il y a un hover:

    li ul {
opacity: 0;
transition: all 0.5s ease 3s;
}
li:hover ul {
opacity: 1;
transition: all 0.5s ease 0s;
}
    Merci mais sa ne fonctionne pas, pouvez-vous me dire où dois-je incorporer webkit retard, Veuillez vérifier moi css de morue. vous voulez vivre le lien alors je vais poster ici.
    J'ai ajouté un lien vers un simple JSFiddle démo. La syntaxe est la même pour tous les préfixes, si elle est -o ou -webkit etc.
    Merci Steve Fenton, c'est un travail, mais ne pas ajouter à l'ensemble, la liste déroulante cacher rapidement. et sur chrome sur souris déroulant coupé pour peice. ne montre pas tout. je vais vous envoyer l'URL du site web si vous pouvez m'aider.
    Très cool! Appris quelque chose de nouveau aujourd'hui! Merci

    OriginalL'auteur Fenton

  2. 3

    Vous ne pouvez pas utiliser les css transition lors de l'utilisation de display none, seule solution avec affichage aucun n'est js.

    OriginalL'auteur Goran Jakovljevic

  3. 0

    Vous pouvez utiliser la propriété css3 transition-delay de retarder l'exécution de css. Cliquez sur "Essayez-le Vous-même" pour voir un exemple.

    Merci mais sa ne fonctionne pas, pouvez-vous me dire où dois-je incorporer webkit retard, Veuillez vérifier moi css de morue. vous voulez vivre le lien alors je vais poster ici.

    OriginalL'auteur AndrewHipp