【问题标题】：Delay Hover effect on background-size in CSS延迟悬停对 CSS 中背景大小的影响
【发布时间】：2014-11-26 17:31:58
【问题描述】：

我想知道是否有办法延迟从“覆盖”到“包含”的背景大小的悬停效果？我已经看到过渡延迟适用于背景颜色和其他属性，但不适用于背景大小。任何帮助将不胜感激。谢谢！

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 来解决此问题的方法。

这种方式“背景尺寸”与“包含”和“覆盖”一起使用

$("#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/

【问题讨论】：

看这个：stackoverflow.com/questions/8947683/…

尝试添加以下内容，仍然无法使用背景大小。

 过渡：背景大小 2s 缓入； -moz-transition：背景大小 2s 缓入； -ms-transition：背景大小 2s 缓入； -o-transition：背景大小 2s 缓入； -webkit-transition：背景大小 2s 缓入；过渡：-延迟1s； -moz 过渡延迟：1 秒； -ms-转换延迟：1； -o-过渡延迟：1s； -webkit-transition-delay：1s；

好的，只是记得看过它，并认为它可能会有所帮助！对不起，它没有工作！祝你好运:)

标签： css hover delay background-size

【解决方案1】：

所以，您的 CSS 只有一件小事，否则它将完全按照您的预期工作。

您不能从非数值转换

background-size 的值 contain 和 cover 不能转换。由于它们是非数字的，因此您无法对它们进行 CSS 计算。

如果您将其更改为如下示例中的数值，它将完全按照您的预期发生：

Fiddle illustrating this example

以下是对 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;
}

【讨论】：

【解决方案2】：

试试 jQuery 动画功能怎么样？无需付出极大的努力，我认为这是您解决问题的良好开端。当然，您可以随意修改。

注意：我了解您要求使用 CSS，但在这种情况下，JQuery 将是您最好的选择。但是，如果您只请求 CSS，请忽略此响应。但我发布它是因为未来的访问者可能能够使用此方法并且不受您的限制。干杯！

$( "div ").hover(function() {
    $( "img" ).animate({
      width: "100%",
    }, 1500 );
});

DEMO

【讨论】：

我实际上想延迟悬停效果的发生，而不是延迟动画的持续时间。与此类似...而不是延迟背景颜色的变化，我想延迟背景大小从封面到包含。 dabblet.com/gist/1498443
还是感谢 Lotusms
没问题。我很抱歉。如果我以后有时间我会重新审视这个。除非别人得到它。感恩节快乐

【解决方案3】：

你可以这样做：

DEMO

如果你想工作 transition 应该使用带有 px 的背景位置，例如：

div{
   background-position: 0px 0px;
}
div:hover{
   background-position: center center;
}

【讨论】：