内容之前的转换延迟

Question

我正试图在：before元素上设置一个transition-delay，但它并不真的想做我想做的事。

转换是图像的变化，因为我希望它在用户悬停图像所在的div后一秒钟发生变化

我已经建立了一个JSFiddle演示来提供帮助。。

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/