延迟悬停效果在 CSS 中的背景大小

Question

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

div{
    display:inline-block;
    width: 100px;
    height: 100px;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    background-image: url("https://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/

Answer 1

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

无法从非数值转换

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

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

小提琴说明此示例

以下是对 CSS 的更改：

div{
    display:inline-block;
    width: 100px;
    height: 100px;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    background-image: url("https://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;
}

Answer 2

试试jQuery动画函数怎么样？在不付出巨大努力的情况下，我认为这是您问题的良好开端。当然，您可以根据需要进行修改。

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

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

演示

Answer 3

你可以做这样的事情：

---

演示

---

如果你想工作过渡应该使用背景位置和px，如下所示：

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