Show Hide Div On Hover Using HTML, CSS and jQuery

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.

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.

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.

Output


Hover Below list Buttons to display the div

  • First button
  • Second button
  • Third button
  • Forth button
First div
Second div
Third div
Forth div

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