How to Open Dropdown on Hover Using jQuery and JS

Learn how to create a select box to open dropdown on hover using jQuery. The short answer is: use the hover event with the jQuery attr() function to show select dropdown.

If you are using 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 Behaviour of Dropdown Select Box on Click Displays Options

A simple select box option is showing in the example below. It contains options that you can open on dropdown click and select the options. Here, the users have to first click the select dropdown and after that, they will be able 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 the below methods to create your own select options open on hover. So, let’s start the method with a live example and download given below for a quick start.

How to Open Dropdown on Hover Using jQuery attr()

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

By doing this, it displays all the options 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.

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 the above jQuery example does. However, it uses onmouseover and onmouseout event to make the 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.

You May Also Like to Read