I am finishing my website and am struggling with a hover function I would like to use.
Even though when i place the cursor on top of the image, the sub-image displays fine, when i do it the first time opening the website i get a fast blink on the page, followed by the correct image. The following attempts after the first try render perfectly. Could anyone help? Below is the javascript code i used. You can try my website here http://www.tasteofbrazilkc.com

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>