How do I get a button to show on mouseover using jQuery?

Question

I am trying to get a button to appear over an image when there is a mouseover event over the image. I have multiple images on the screen that I would like to have the same functionality. I'm having trouble getting this to work as the button is always present. Any advice on how to get it to work? Below is the rendered html and javascript.

javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">

$(document).ready(function() {

$('.image').mouseover(function(){
            $('.munchbutton').show();
});
});

</script>

css

div.munchbutton{
    position: absolute; 
    bottom: 5px; 
    right: 0px;
    left: 60px;
}

div.wrapper{
    float:left; /* important */
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px;
}

html

<!-- wrapper div -->
    <div class='wrapper'>

    <!-- image -->
    <div class="image" style="position: relative; left: 0; top: 0;">

        <a href="/partners/Business/CNNMoney" >
            <img src="/static/CNNMoney.png" style="position: relative; top: 0; left: 0;"/>
        </a>

        <!-- partner munchbutton div --> 
        <div class='munchbutton'>
            <form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div>
                <input type="hidden" name="channel" id="channel" value="CNNMoney" />
                <input type='submit' class = 'add' value='Add to plate'/>
            </form>
        </div>
        <!-- end munchbutton div -->

    </div>
    <!-- end image div -->

    </div>
<!-- end wrapper div -->


<!-- wrapper div -->
    <div class='wrapper'>

    <!-- image -->
    <div class="image" style="position: relative; left: 0; top: 0;">

        <a href="/partners/Business/EconomistMagazine" >
            <img src="/static/EconomistMagazine.png" style="position: relative; top: 0; left: 0;"/>
        </a>

        <!-- partner munchbutton div --> 
        <div class='munchbutton'>
            <form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div>
                <input type="hidden" name="channel" id="channel" value="EconomistMagazine" />
                <input type='submit' class = 'add' value='Add to plate'/>
            </form>
        </div>
        <!-- end munchbutton div -->


    </div>
    <!-- end image div -->

    </div>
<!-- end wrapper div -->

Answer 1

In order for .show() to work, surely you must hide the buttons first!

Working fiddle (the only change is that .munchbutton is now display: none; by default)

Let me know if this is not what you were after.

Answer 2

The original state of the munchbutton should be display: none; and then you can show it from there.

Also when you set the show I assume you are only wanting to show the button within that div so you should probably use $(this).find('.munchbutton').show();

Here a fiddle with a mouseout chained - http://jsfiddle.net/GTw8d/