Learn how to show/hide div on li hover using HTML and CSS and jQuery. When you hover over the list items, the related div will start to appear immediately on hover. This may require coding many times when you want to display div on hover.

The list items can appear as the buttons as given in the below examples. You have to use the popular jquery show/hide function to display or hide the div content on hover of the list item. In addition to this, you also need to know how to get id of an HTML element on hover using jQuery.

The show/hide function automatically add the CSS display property to the div element when someone hover the list item. This is the fastest way of showing div dynamically on hover of list items.

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 the simple example to show and hide div on hover of list items using jQuery, HTML, and CSS.

There are four list items given inline as you can see below.

Output

Hover Below list Buttons to display div

  • Show div one
  • Show div two
  • Show div three
  • Show div fore
This is div one.
This is div two.
This is div three.
This is div fore.

The above example contains the four list items and four div element to show on hover. The jQuery script has given above using the mouseover function of jQuery. This function finds the mouse event if hover 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 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 hover of the list items.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.