0

「カバー」から「含む」への背景サイズへのホバー効果を遅らせる方法があるのだろうか？transition-delay が backround-color やその他のプロパティで動作するのを見たことがありますが、backround-size では動作しません。どんな助けでも大歓迎です。ありがとう！ 

div{
    display:inline-block;
    width: 100px;
    height: 100px;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: 0s background-size;
    transition-delay:1s;
}
div:hover{
    background-size: contain;
    background-color:red;
}

http://jsfiddle.net/rtku7sqk/

更新 おそらく、ホバー効果の発生を遅らせたいが、アニメーションの期間を延長したくないことを明確にする必要があります。

これに似ています... http://dabblet.com/gist/1498443

最新のアップデート

CSSとJavaScriptの両方を組み合わせて使用​​ することで、これを修正する方法を見つけました。

このように、「background-size」は「contain」と「cover」で機能します

$("#tmp").hover(function() {

    /* Mouse enter */
    var thisone = $(this);
    window.mytimeout = setTimeout(function() {
        thisone.addClass("mouseon");
    }, 1000);

}, function() {

    /* Mouse leave */
    clearTimeout(window.mytimeout);
    $(this).removeClass("mouseon");
});

http://jsfiddle.net/rtku7sqk/5/

4

3 に答える 3

1

したがって、CSS には小さな点が 1 つだけあります。それ以外の場合は、期待どおりに機能します。

数値以外からの遷移はできません

値containとcoverforbackground-sizeは遷移できません。それらは非数値であるため、それらに対して CSS 計算を実行することはできません。

これを以下の例のように数値に変更すると、まさに期待どおりの結果が得られます。

この例を示すフィドル

CSS の変更点は次のとおりです。

div{
    display:inline-block;
    width: 100px;
    height: 100px;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: 100%; /* NOT `cover` anymore */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: 0s background-size;
    transition-delay: 1s;
}
div:hover{
    background-size: 20%; /* NOT `contain` anymore */
    background-color:red;
}
于 2014-11-26T18:29:57.007 に答える