views:

25

answers:

0

Hello I'm quite new to using jQuery and I was trying to create a menu that showed different pictures when you moused over the links. It will show one picture and hide 4 others and when you mouse off a link it will go back to a default picture. I'm using the hover function but sometimes when I moved the mouse to the bottom both images (the one related to the link and the default) both show up and I was wondering if there was some check I could do to make sure that this didn't happen. Here's what my code looks like.

    $("#blog-img").hide();
    $("#contact-img").hide();
    $("#headturner-img").hide();
    $("#work-img").hide();

    $("#blog").hover(
        function(){
                    $("#default").hide();
            $("#contact-img").hide();
            $("#headturner-img").hide();
            $("#work-img").hide();
            $("#blog-img").show("slow");
        },
        function(){
            $("#blog-img").hide();
            $("#default").show("slow");    
           }
    );

I would love any help I could get on this.