web-dev-qa-db-ja.com

CSSで：hover効果を遅らせるにはどうすればよいですか？

JavaScriptを使用せずに：Hoverイベントを遅らせる方法はありますか？アニメーションを遅らせる方法があることは知っていますが、：hoverイベントの遅延については何も見ていません。

私はメニューのような吸盤の息子を構築しています。余分なJSウェイトを追加せずに、hoverIntentの動作をシミュレートしたいと思います。私はこれをプログレッシブエンハンスメントとして扱い、メニューを使用するためにJSを必須にしたくないのです。

メニューマークアップの例：

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

完全なデモは次のとおりです。 http://jsfiddle.net/aEgV3/

csshoverdelay
61
Adam Youngers

エフェクトがCSSベースの場合、トランジションを使用して、必要な:hoverエフェクトを遅らせることができます。

例えば

div{
    transition: 0s background-color;
}

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

これにより、ホバー効果（background-color（この場合）の適用が1秒間遅延します。

ホバーのオンとオフの両方の遅延のデモ：

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>

ホバー時のみの遅延のデモ：

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>

トランジションのベンダー固有の拡張 および W3C CSS3トランジション

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

これにより、ほとんどすべてのブラウザに適用される移行遅延が追加されます。

8
Shailesh kala

より審美的な外観のために:)は次のとおりです：

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

.sNv2 .nav ULの位置は、z-index:-1とz-index:1の.sNv2 .nav LI:Hover ULで置き換えることができます

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