延遲背景 - 圖像

Question

CSS

.navbar-brand { 
    display: block; 
    margin: 0; padding: 0; 
    height: 80px; 
    width: 70px; 
    background: url('img/logo_orig.png') no-repeat center center; 
    background-size: 100% auto; 
} 

.navbar-brand:hover { 
    background: url('img/logo_hov.png') no-repeat center center; 
    background-size: 100% auto; 
} 

這產生與背景圖像的按鈕，當它盤旋hnages背景的懸停。

我想添加一個延遲到背景圖像時懸停。類似於使用

transition: background-color 0.35s ease; 

Answer 1

您可以使用類似這樣的東西。

HTML：

#cf { 
 
    position: relative; 
 
    height: 281px; 
 
    width: 450px; 
 
    margin: 0 auto; 
 
} 
 
#cf img { 
 
    position: absolute; 
 
    left: 0; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
    height:inherit; 
 
    width:inherit; 
 
} 
 
#cf img.top:hover { 
 
    opacity: 0; 
 
}

<div id="cf"> 
 
    <img class="bottom" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" /> 
 
    <img class="top" src="http://cdp.pasctunisie.org/wp-content/uploads/2015/05/light-circles-wave-powerpoint-backgrounds.jpg" /> 
 
</div>