Last Updated on September 1, 2022 by Roshan Parihar
In this tutorial, learn how to show hide div on hover using HTML, CSS, and jQuery. The short answer is to use the show() and hide() with the click event using hover() function of jQuery.
When you hover over the button, the <div> element will start to appear. On the mouse out of the button, it hides the div element. You can also use the toggle() function of jQuery to perform both the show and hide functions.
Let’s find out with the simple examples with different methods given below.
Method 1: Using show() and hide() Function For jQuery Show Hide Div on Hover
To perform the show/hide tasks on hover events, use the hover() function of jQuery. Inside this function, use the show() function to show on hover and hide() function to hide on mouse out in jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('button').hover(function(){ $('div').show(); }, function(){ $('div').hide(); }); }); </script> <button type="button">Hover me to show/hide div</button> <div style="display:none;"> <p>This is a paragraph inside a div element. </div> |
Output
The above example contains the button element and the div element. Initially, the div element is in a hidden state. When you hover over the above button, it displays the div element content. On mouse out, it hides the div element.
The show/hide function automatically adds the CSS display property to the div element when hovers over the div.
Method 2: Show/Hide Using Toggle() Function
If you want to perform show hide div element on hover using a single function, you can use the hover() function for hover event. Inside this function, you just have to use the toggle() that works for both the show and hide function.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $('button').hover(function(){ $('div').toggle(); }); }); </script> <button type="button">Hover me to toggle div</button> <div style="display:none;"> <p>This is a paragraph inside a div element. </div> |
Output
When you take your mouse to the above button, it shows the div element. However, on mouse out, it hides the div element.
So, toggle() is a single function that works to show and hide the content. It can be useful when don’t want to use two separate functions for showing and hiding the content on hover.
How to Show/Hide Div On li Hover Using HTML and CSS
To perform this task, you have to use HTML, CSS, and jQuery. Below is a simple example to show and hide div on hover of list items using jQuery, HTML, and CSS. It uses the 1st method given above but in mouseover event using mouseover() function of jQuery.
There are four list items given inline as you can see below. On each button you hover, you will get different div element content. See the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<style> .mymultiplediv{ cursor:pointer; } .mymultiplediv{ width: 150px; border: 1px solid #ccc; margin: 10px; padding: 10px; color: #fff; border-radius: 5px; border: 1px solid #000; background: #7d7474; text-align: center; } .mydiv{ display:none; padding:10px; } #divone{ background:#ffd0a0; } #divtwo{ background:#fd9999; } #divthree{ background:#a3ffa3; } #divfore{ background:#a3f6ff; } </style> <script> $(document).ready(function(){ $('.mymultiplediv').mouseover(function() { myvar = this.id; $("div.mydiv").hide(); $('#div'+myvar).show(); }); }); </script> <div class="text-center"> <ul class="list-inline"> <li class="mymultiplediv" id="one">First button</li> <li class="mymultiplediv" id="two">Second button</li> <li class="mymultiplediv" id="three">Third button</li> <li class="mymultiplediv" id="fore">Forth button</li> </ul> </div> <div class="mydiv" id="divone"><strong>First div</strong></div> <div class="mydiv" id="divtwo"><strong>Second div</strong></div> <div class="mydiv" id="divthree"><strong>Third div</strong></div> <div class="mydiv" id="divfore"><strong>Forth div</strong></div> |
Output
Hover Below list Buttons to display the div
- First button
- Second button
- Third button
- Forth button
The above example contains the four list items and four div elements to show on hover. The jQuery script given above uses the mouseover function of jQuery. This function finds the mouse event if hovers over the mentioned element.
The id can get by using the current hover element given using the class name. Initially, all the div elements are in the hidden state. The jquery show and hide function perform the show and hide effect on the hover of the element.
Also, you have to use the hide function to hide the displayed div on hover. This helps in displaying only the required div element on the hover of the list items.
You May Also Like to Read