delay loading of a background image using id:hover css3 or html5
I would like to delay the loading of an image on :hover for 1 second every time it is开发者_运维技巧 moused over.
Is this possible?
code is:
<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>
You could do it using CSS transitions, change the opacity from 0 to 1, in zero seconds, with a one second delay:
#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
}
Currently only supported in Chrome/Safari/Opera
You should pre load background image on the page.
.hover:before {
content: url("/hover-image-path.jpg");
width:0;
height:0;
visibility:hidden;
position: absolute;
}
加载中,请稍侯......
精彩评论