How do I get a button to show on mouseover using jQuery?
- by sharataka
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 -->
