How to Open Dropdown on Hover Using jQuery and JS

Learn how to create a select box that open dropdown on hover using jQuery. Use the jQuery hover() with the attr() to show select dropdown on mouse hover.

If you have used the select box on your form, you may see its dropdown will open only on click. However, in some places of form, you may like to show the dropdown on mouse hover. This makes it easy for users to save more clicks on the dropdown to select options.

Default Select Box Options Which Displays on Click

A simple select box option is showing the below example. It contains options which you can open on click and select. Here, users have to click the select dropdown for two times to select the required option.

Test it Live

Output

Select Your Country Below

To get faster user input data, you may have to create a select box that allows users to select options on hover.

But, what is the method to show select options on hover rather than click? Well! you have to read below methods to create your own select options open on hover. So, let’s start the method with live example and download given below to a quick start.

How to Open Dropdown on hover Using jQuery hover() and attr()

The jQuery hover() works when the user hovers over the HTML element. You have to perform displaying select options when a hover event happens or trigger. Also, use the attr() to get the size of select and increase it on hover.

By doing this, it displays all the option together on hover. The user now requires only to click the select option for a single time to select their choice.

Test it Live

Output


Select Your Favorite Game Below

Now, you just have to hover over the above select box to open every option. Click any option of your choice to select.

Watch a Live Demo and Download Code below

Display Select Box Dropdown on hover Using javascript

In addition to the above method, you can also create a select box dropdown options to display on hover using javascript. You have to use the below-given example as per your requirement.

It also doing the same thing as of the above jQuery example does. However, it uses onmouseover and onmouseout event to make below example working.

Test it Live

Output



Mouse hover over the above select box to get each option to select. You can change the options as per your use on the project.

I hope, you like this post of how to create a select box that displays dropdown options on hover. If you have any queries regarding the tutorial, please comment below.

Suggested Post to Read

Also tell me, which method you are using to create a select box dropdown open on hover. Please leave a comment below.

Leave a comment

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.


Download Link Will be Send to Your Email id