Hover Blink

[Tobm]

I am finishing my website but I am still encountering a final problem.

The coconut image has a background hover image when the user points the cursor over it, another image appears. Everything works fine, however, when the website is loaded for the first time, there is a fast blink before the hover image is displayed. After that, it works perfectly. How can I fix this issue?

Here is the snippet of the code.

<script type="text/javascript">

$(document).ready(function() {

$('#coconut').hover(function() {

$('body').addClass('hover');

}, function(){

$('body').removeClass('hover');

});

});

$(window).scroll(function(event) {

$("#nav").css("margin-top", 220-$(document).scrollTop());

});

</script>

Please help

my website: http://www.tasteofbrazilkc.com

[justsomeguy]

It might be an issue with loading. You can either preload the hover image, or use a sprite.

[Tobm]

I preloaded the image with body:after css and it worked great.

Thank you