divで時間遅延のあるホバーに透明度を追加

私はdivにカーソルを置いてから1秒後に部分的に透明になるようにします。もはやホバリングしなくなったら、私はそれが時間の遅れなしに即座にデフォルトの完全な不透明度に戻るようにします。私は非常に非常にjavascriptを知っているので、私はこれを行う方法を知らない。divで時間遅延のあるホバーに透明度を追加

くらい実は事前

出典

2016-12-25 Usman Sikander

この遅延は、ユーザーエクスペリエンスのためにあなたがそれを望む理由はいかなる理由悪いだろうか？この質問は以前に尋ねられ、ここでうまく答えられました。それを達成するためにhoverintentプラグインを使用することができます：http://stackoverflow.com/questions/435732/delay-jquery-hover-event –

@NathanielFlickその遅延は良いですこの場合、私を信じても助けることができます –

はい私は上記の私の答えを更新しました。携帯端末では、ホバーの「ホバー」状態がないため、ホバーを遅らせることはできません（タッチ/クリックのみ）。 –

で感謝を感謝すべてのヘルプは、この場合のJSを使用しないでください。 CSS Transitionsは、js/jQueryアニメーションよりもスムーズで効率的なので、より良いでしょう。

以下は、ホバーの遅延が2秒の例です。

.btn{ 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    background: rgba(0,0,0,1); 
 
    color: #fff; 
 
    text-decoration: none; 
 
    -webkit-transition: background 0.5s ease 0s; 
 
    transition: background 0.5s ease 0s; 
 
} 
 
.btn:hover{ 
 
    -webkit-transition: background 0.5s ease 2s; 
 
    transition: background 0.5s ease 2s; 
 
    background: rgba(0,0,0,0.5); 
 
}

<a href="#" class="btn">Text</a>

出典

2016-12-25 12:00:16 Kuba

divで時間遅延のあるホバーに透明度を追加

答えて

関連する問題