Is there a way to preload an image for a hover state so that the background changes immediately when the user hovers over a specific element, rather than waiting for a few seconds?
If you'd like to see the site in action, visit
I'm satisfied with the current code but wondering if there's a simple tweak I can make to achieve this effect. Thank you!
<!-- Background Change Script -->
<script type="text/javascript">
$(document).ready(function() {
$('#hoverarea').hover(function() {
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
});
</script>
<!-- End of Background Change Script -->
<div id="hoverarea"><a href="comingsoon.html"> <img src="images/blank.png" onmouseover="playSound('audio/apple2.mp3');"> </a></div>
body {
background-image:url('../images/blackandwhite.gif');
background-position:50% 20px;
background-attachment:fixed;
background-repeat: no-repeat;
background-color:black;
height:714px;
width:1024;
}
#hoverarea {
position:absolute;
width:400px;
height:400px;
top:300px;
right:20px;
z-index:2000;
}
.hover {
background-image:url('../images/colour.gif');
}
li a:hover + img {
left: 0px;
}