使用id延遲加載背景圖片：hover css3或html5

我想推遲加載一張圖片：每次將它懸停時懸停1秒。使用id延遲加載背景圖片：hover css3或html5

這可能嗎？

代碼：

<style> 
#bg {background-image: url(bg.png); 
background-repeat: no-repeat; 
position:absolute; 
margin-left: auto; margin-right: auto;display: block; 
height: 354px;width: 571px; 
border: 1px solid #000000; } 
#delay {position: absolute; 
width: 100%; 
height: 354px; 
} 
#delay:hover {background: transparent url(delay.png) no-repeat;} 
</style> 
</head> 

<body> 
<div id="bg"> </div> 
<div id="delay"> </div>

來源

2011-03-18 dunivanb

你可以用CSS3做，絕對是jQuery。我對你的問題是爲什麼？ – Kyle 2011-03-18 12:34:53

使用java腳本 – sandeep 2011-03-18 12:35:32

你可以做到這一點使用CSS轉換，從0更改爲不透明度爲1，在零秒，以一秒的延遲：

#delay { 
    background: transparent url(delay.jpg) no-repeat; 
    opacity: 0; 
    -webkit-transition: opacity 0s linear; 
    -o-transition: opacity 0s linear; 
} 
#delay:hover { 
    -webkit-transition-delay: 1s; 
    -o-transition-delay: 1s; 
    opacity: 1 
}

目前只支持在Chrome/Safari/Opera中

來源

2011-03-18 13:05:35 bcoughlan

非常感謝你！ – dunivanb 2011-03-18 14:00:09

您應該在頁面上預加載背景圖像。

.hover:before { 
    content: url("/hover-image-path.jpg"); 
    width:0; 
    height:0; 
    visibility:hidden; 
    position: absolute; 
}

來源

2016-01-26 11:42:21 sameeuor

使用id延遲加載背景圖片：hover css3或html5

回答

相關問題