私はCSSでマウス出力に遅延を適用したい

マウス出力イベントでCSSトランジションを開始する前に遅延を適用しようとしています。私のCSSコードは以下の通りです。マウスが外れるとCSSトランジションが始まる前に時間遅延を適用する方法を教えてください。私はCSSでマウス出力に遅延を適用したい

ユーザーがマウスポインタをメニューから移動した後、しばらく（たとえば3秒間）メニューが安定した状態に保たれるようにしたいと考えています。

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

出典

2013-04-24 Tim John

を実証するfiddleは次のように、構文は次のとおりです。

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

ので

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

構文は、すべてのプレフィックスに対して同じですバージョンも。

私はこれをデモにしました。なぜなら、アイテムを遅れずに表示させるために少しトリッキーなことをする必要があるからです。

li ul { 
    opacity: 0; 
    transition: all 0.5s ease 3s; 
} 

li:hover ul { 
    opacity: 1; 
    transition: all 0.5s ease 0s; 
}

出典

2013-04-24 22:26:40 Fenton

ありがとうございますが、うまくいかない、あなたは私にwebkitの遅延を埋め込むべきか教えてください、私にcss codをチェックしてください。ライブリンクが必要な場合は、ここに投稿します。 –

シンプルなJSFiddleデモへのリンクを追加しました。構文は、 '-o'か' -webkit'など、すべてのプレフィックスで同じです。 – Fenton

Thanks Steve Fenton、これは機能していますが、全体的には追加されていないため、ドロップダウンはすばやく隠れています。とクロムオンのマウスのドロップダウンで切り取って切り取ります。全体を表示していません。私を助けることができる場合は、ウェブサイトのURLをお送りします。 –

CSSにはtransition-delayというプロパティがあります。これをコードに追加するだけで、目的の効果が得られます。速記遷移プロパティの目的のために

transition-delay:3s;

、ここだからあなたの場合には、それはこの

div:hover { 
 
    -webkit-transition: .5s ease-in-out 3s; 
 
    -moz-transition: .5s ease-in-out 3s; 
 
    -o-transition: .5s ease-in-out 3s; 
 
    transition: .5s ease-in-out 3s; 
 
    color: red; 
 
    cursor: pointer; 
 
}