css - :before content 上的转换延迟

Question

我正在尝试在 :before 元素上设置一个 transition-delay，但它并不想按照我的意愿去做。

过渡是图像的变化，因为我希望它在用户将鼠标悬停在图像所在的 div 后一秒钟内发生变化。

我已经设置了一个 JSFiddle-demo帮助..

Answer 1

检查以下代码。最好在背景图像上使用过渡。

div {
    width:100%;
    height:100%;
}

i {
    width:300px;
    height:300px;
    background:greenyellow;
    display:block;
    margin:150px auto;
    -webkit-transition: background 1s;
}

i:before {
    content: "";
    background: url('http://hph-e.dk/wordpress/wp-content/uploads/2014/06/house.png')no-repeat;
    -webkit-transition: background 1s;
    width: 100%;
    height: 100%;
    display: block;
}

div:hover i:before {
    content: "";
    background: url('http://www.clker.com/cliparts/U/6/e/C/Z/l/green-house-icon-md.png') no-repeat;
    -webkit-transition: background 1s;
    width: 100%;
    height: 100%;
    display: block;
}

一个例子:http://jsfiddle.net/hf6rpg9p/4/