jQuery Show Div Mouseover Examples (On Hover image, On Hover div)
When working with jQuery, there may have been times when you need to hide a div (or an other element) on page load and show this element when an image or another element is hovered upon i.e. onmouseover event. So do you know how to do this? If not, then this article is for you. In this article, I am going to share examples on how to show div on mouseover / hover of an image, another div, etc. using jQuery. Read on to find out more.
Examples to Show Div On Mouseover using jQuery
Let us consider that we have a div with ID “hidden_div” in our page & we hide this div on page load. We also have few other elements on the page such as an image, a button, another div, etc. We would like to be able to show this hidden div when these elements i.e. image is hovered upon, the button is clicked, on div mouseover, etc. Let’s start with basic setup of the page i.e the HTML and the basic jQuery required to hide the div upon page load.
Here is the source code (HTML + jQuery):
<html>
<head>
<title>jQuery Show Div On Mouseover Examples</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
<style type="text/css">
#default_div {
border: 1px solid #063;
margin-top: 10px;
margin-bottom: 10px;
}
#hidden_div {
border: 2px dashed #F60;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<img src="images/1.jpg" id="img" class="img_class" style="color:#03C;" />
<input type="submit" name="show_div" id="show_div" value="Show Div" />
<input type="submit" name="hide_div" id="hide_div" value="Hide Div" />
<input type="submit" name="toggle_div" id="toggle_div" value="Toggle Div" />
<div id="default_div">This div is visible by default</div>
<div id="hidden_div">This div is hidden</div>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
//MANDATORY: Hide the intended div upon page load or it will be visible throughout
$('#hidden_div').hide();
});
</script>
</body>
</html>Just look through the above code to see if it makes sense to you. We are simply placing an image, 3 buttons, and 2 Divs on the page. We are applying class of “img_class” to the image, in order to perform the desired operations. We are going to perform operations on each of these elements so that we can show/hide the “hidden_div” appropriately. So let’s see how we can hide/unhide div in each of these cases:
Example 1.1: Show Div on Mouseover image
//When the Image is hovered upon, show the hidden div using Mouseover
$('.img_class').on( "mouseover", function() {
$('#hidden_div').show();
});Example 1.2: Hide Div on Mouseout image
//When the Image is hovered away from, hide the div using Mouseout
$('.img_class').on( "mouseout", function() {
$('#hidden_div').hide();
});Example 2.1: Show Div on Hover image
//When the Image is hovered upon, show the hidden div
$('.img_class').hover( function() {
$('#hidden_div').show();
});Example 2.2: Hide Div on Mouseleave image
//When the Image is hoverd away from, hide the div
$('.img_class').on( "mouseleave", function() {
$('#hidden_div').hide();
});Example 3.1: Show Div on click of a button
//When the Show button is clicked, reveal the hidden div
$('#show_div').click(function() {
$('#hidden_div').show();
});Example 3.2: Hide Div on click of a button
//When the Hide button is clicked, hide the revealed hidden div
$('#hide_div').click(function() {
$('#hidden_div').hide();
});Example 4.1: Show Div on hover of another Div
//When the Default Div is hovered upon, show the div
$('#default_div').hover( function() {
$('#hidden_div').show();
});Example 4.2: Hide Div on mouseout/mouseleave of a Div
//When the Default Div is hovered away from, hide the div
$('#default_div').on( "mouseleave", function() {
$('#hidden_div').hide();
});Example 5: Toggle Div display or hidden when the same button is clicked
//When the Button is clicked, show Div if hidden and vice-versa
$('#toggle_div').click(function () {
$('#hidden_div').toggle();
});A word of caution: Just remember to name the class, ID’s correctly of the elements in order to show/hide the div. Incorrect usage might result in the cease of functionality.
That’s it for now!
Do you know of any other ways to hide / show div on mouseover using jQuery? Feel free to suggest by commenting below.
this is not working
antonio
December 14, 2012 at 1:32 pm
Antonio,
Thanks for letting me know. Yes indeed, it wasn’t working as extra characters appeared in the code when it was pasted from my local development server to the WordPress platform. I have looked into it & fixed the issue. It’s working now. So you may now try it now & let me know how it goes.
Regards,
Robert
Robert
December 16, 2012 at 3:15 pm
Hi Thanks for provide this code… it works great!
How can I hide the original default_div once I have hovered upon it to reveal the hidden div? Then it should re-appear once I do “mouseleave”. I tried doing something like below, but it didn’t work.
Thanks in advance for your help.
$(‘#default_div’).hover( function() {
$(‘#hidden_div’).show();
$(‘#default_div’).hide();
});
January 10, 2013 at 6:51 pm
It’s possible to do what you are asking. Try the following code & let me know how it goes:
$("#default_div").bind('mouseover',function(event){
$('#hidden_div').show();
$('#default_div').hide();
});
$("#hidden_div").bind('mouseleave',function(){
$('#hidden_div').hide();
$('#default_div').show();
});
Robert
January 13, 2013 at 3:22 am
Thank You so much! That works perfectly!
January 15, 2013 at 5:31 pm
Thanks for the comment. Glad to know it helps 🙂
Robert
January 15, 2013 at 5:47 pm
Thanks for the code!! I am going to use it on my portfolio site. I have four images and want to have a different description pop up on each image on rollover. I am going to try and customize your code a little to see if I can make this happen without having to have four separate lines for each image. I know I code use disjointed rollover for this, but that is not teaching myself something new. Well here goes, I will let you know how I did.
Robert Bonneer
February 19, 2013 at 12:28 am
Good luck! And let us know how it goes.
Rocky
February 21, 2013 at 7:57 pm