{"id":1278,"date":"2012-09-26T00:39:02","date_gmt":"2012-09-26T00:39:02","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1278"},"modified":"2012-09-26T00:39:02","modified_gmt":"2012-09-26T00:39:02","slug":"jquery-show-div-mouseover-show-div-on-hover-image-div-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-show-div-mouseover-show-div-on-hover-image-div-examples\/","title":{"rendered":"jQuery Show Div Mouseover Examples (On Hover image, On Hover div)"},"content":{"rendered":"<p>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 <em><strong>how to show div on mouseover \/ hover of an image, another div, etc. using jQuery<\/strong><\/em>. Read on to find out more.<!--more--><\/p>\n<h2>Examples to Show Div On Mouseover using jQuery<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1278\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let us consider that we have a div with ID &#8220;<strong>hidden_div<\/strong>&#8221; in our page &amp; 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&#8217;s start with basic setup of the page i.e the HTML and the basic jQuery required to hide the div upon page load.<\/p>\n<p><strong>Here is the source code (HTML + jQuery):<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true crayon-selected\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery Show Div On Mouseover Examples&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery_1.7.1_min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n#default_div {\nborder: 1px solid #063;\nmargin-top: 10px;\nmargin-bottom: 10px;\n}\n#hidden_div {\nborder: 2px dashed #F60;\nmargin-top: 10px;\nmargin-bottom: 10px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;img src=\"images\/1.jpg\" id=\"img\" class=\"img_class\" style=\"color:#03C;\" \/&gt;\n\n&lt;input type=\"submit\" name=\"show_div\" id=\"show_div\" value=\"Show Div\" \/&gt;\n\n&lt;input type=\"submit\" name=\"hide_div\" id=\"hide_div\" value=\"Hide Div\" \/&gt;\n\n&lt;input type=\"submit\" name=\"toggle_div\" id=\"toggle_div\" value=\"Toggle Div\" \/&gt;\n\n&lt;div id=\"default_div\"&gt;This div is visible by default&lt;\/div&gt;\n\n&lt;div id=\"hidden_div\"&gt;This div is hidden&lt;\/div&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\n\/\/MANDATORY: Hide the intended div upon page load or it will be visible throughout\n$('#hidden_div').hide();\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>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 &#8220;<strong>img_class<\/strong>&#8221; 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 &#8220;hidden_div&#8221; appropriately. So let&#8217;s see how we can hide\/unhide div in each of these cases:<\/p>\n<h3>Example 1.1:\u00a0Show Div on Mouseover image<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Image is hovered upon, show the hidden div using Mouseover\n$('.img_class').on( \"mouseover\", function() {\n\n$('#hidden_div').show();\n\n});<\/pre>\n<h3>Example 1.2:\u00a0Hide Div on Mouseout image<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Image is hovered away from, hide the div using Mouseout\n$('.img_class').on( \"mouseout\", function() {\n\n$('#hidden_div').hide();\n\n});<\/pre>\n<h3>Example 2.1:\u00a0Show Div on Hover image<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Image is hovered upon, show the hidden div\n$('.img_class').hover( function() {\n\n$('#hidden_div').show();\n\n});<\/pre>\n<h3>Example 2.2:\u00a0Hide Div on Mouseleave\u00a0image<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Image is hoverd away from, hide the div\n$('.img_class').on( \"mouseleave\", function() {\n\n$('#hidden_div').hide();\n\n});<\/pre>\n<h3>Example 3.1:\u00a0Show Div on click of a button<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Show button is clicked, reveal the hidden div\n$('#show_div').click(function() {\n\n$('#hidden_div').show();\n\n});<\/pre>\n<h3>Example 3.2:\u00a0Hide Div on\u00a0click of a button<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Hide button is clicked, hide the revealed hidden div\n$('#hide_div').click(function() {\n\n$('#hidden_div').hide();\n\n});<\/pre>\n<h3>Example 4.1: Show Div on hover of another Div<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Default Div is hovered upon, show the div\n$('#default_div').hover( function() {\n\n$('#hidden_div').show();\n\n});<\/pre>\n<h3>Example 4.2: Hide Div on mouseout\/mouseleave of a Div<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Default Div is hovered away from, hide the div\n$('#default_div').on( \"mouseleave\", function() {\n\n$('#hidden_div').hide();\n\n});<\/pre>\n<h3>Example 5: Toggle Div display or hidden when the same button is clicked<\/h3>\n<pre class=\"lang:js decode:true\">\/\/When the Button is clicked, show Div if hidden and vice-versa\n$('#toggle_div').click(function () {\n\n$('#hidden_div').toggle();\n\n});<\/pre>\n<p><em><strong>A word of caution:<\/strong><\/em> Just remember to name the class, ID&#8217;s correctly of the elements in order to show\/hide the div. Incorrect usage might result in the cease of functionality.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1278\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>That&#8217;s it for now!<\/h5>\n<p>Do you know of any other ways to <em><strong>hide \/\u00a0show div on mouseover using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,41],"class_list":["post-1278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-kC","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1278"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1278\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}