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

Posted by sharataka on Stack Overflow See other posts from Stack Overflow or by sharataka
Published on 2012-11-18T16:48:39Z Indexed on 2012/11/18 17:00 UTC
Read the original article Hit count: 229

Filed under:
|
|
|

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 -->

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery