Skip to main content
274 votes
Accepted

Should a dropdown list be closed when mouse leaves?

For consistency, the behavior should be based on the calling action; click or hover. If you are opening the dropdown on click, let the user toggle and close it, or close the previous dropdown when ...
Dipak's user avatar
  • 16.2k
82 votes

Should a dropdown list be closed when mouse leaves?

The answer to this question is part of a more general UX rule: moving the mouse (without a button held down) is not input, and applications should not respond to it by taking any nontrivial action. ...
R.. GitHub STOP HELPING ICE's user avatar
59 votes
Accepted

Is it good practice to allow users to navigate simply by hovering on a menu item without clicking?

This seems full of usability issues, as well as possibly performance issues loading interim unnecessary pages (e.g., user moves mouse across tabs to access one several over). To start, if there's user ...
Brianna B's user avatar
  • 606
43 votes

Should a dropdown list be closed when mouse leaves?

I honestly think that hover menus are bad UX entirely. I suspect the only reason they exist in the first place is that they are easier to implement in pure CSS, so the developer can get away with ...
Manngo's user avatar
  • 531
31 votes

Is it good practice to allow users to navigate simply by hovering on a menu item without clicking?

This is annoying. Ignore any hypotheticals we can't judge in the gif. There's still an enormous usability problem. There are a lot of buttons and whatnot at the top of the browser (or even above that ...
Laurel's user avatar
  • 635
24 votes
Accepted

How long should the delay be before a tooltip pops up?

If anyone is still looking for updated answers around this subject, Nielsen Norman has a great article on the subject: https://www.nngroup.com/articles/timing-exposing-content/ Mouse cursor ...
bentheben's user avatar
  • 276
23 votes

Should a dropdown list be closed when mouse leaves?

I agree with DPS's answer, however I'd opt for explicit behaviour - thus clicking to open and clicking (or pressing Esc) to close. Why not "on-hover"? If the user opens the dropdown and ...
Mike's user avatar
  • 3,125
20 votes

How should a coloured dropdown be styled using Google Material?

Given your requirement: Each status has it's own associated colour and would ideally be displayed in the list Then we're not discussing if there should be a color or not, question is how to ...
Adriano Repetti's user avatar
15 votes

Is it good practice to allow users to navigate simply by hovering on a menu item without clicking?

Having content-obscuring changes happen at all on "hover" is an accessibility bug, so this is a non-starter. Not only may it be difficult or impossible for users with particular ...
R.. GitHub STOP HELPING ICE's user avatar
14 votes

Tooltip CSS cursor

The cursor should change depending on the interaction the user can do with the element, not on the tooltip. A tooltip appears to explain what the element is or what it does. For example when we hover ...
Alvaro's user avatar
  • 16.8k
12 votes
Accepted

How should a coloured dropdown be styled using Google Material?

Short answer: Use your second option, where each field has a neutral white color as the color is not classifing elements in the list. Color should be used to give distinction with other elements from ...
Alvaro's user avatar
  • 16.8k
12 votes

Should a dropdown list be closed when mouse leaves?

...Or you can consider changing the design altogether. Personally I think it's not a good idea to hide functionality under three dots. Show actions on hover You can remove click/hover altogether by ...
Runnick's user avatar
  • 1,753
12 votes

Correct buttons hover state

I think it leads to confusing two concepts: function and state. Button function: interactive UI element Button state: the different forms an element can take based on the the context that it is being ...
Danielillo's user avatar
  • 19.2k
11 votes

Should a dropdown list be closed when mouse leaves?

You might consider adding a way for the user to close the drop down. This way there is no confusion on how to close it and no annoyance of accidentally closing it by moving the mouse out of the area.
BlueMeanie's user avatar
9 votes

Should a dropdown list be closed when mouse leaves?

I happen to find that behavior quite annoying, especially with nested menus, on YouTube on a HTPC. The remote mouse is easy to get off track and wham I have to start over. Anyone with less than ...
JDługosz's user avatar
  • 333
8 votes

Hover vs click on mega menu

This is an interesting question. TL;DR - Personally, I would go with a click because opening a "mega menu" is more of an action. A good rule of thumb is that you want to keep the distinction between ...
Aaron's user avatar
  • 340
7 votes

What is the difference between a mouseover and a hoverover?

From documentation mouseover(): source Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element. Meaning only when the mouse is over an element. .hover(): ...
Dimitra Miha's user avatar
  • 3,739
6 votes
Accepted

Indicate ”hoverable” text

A fairly standard method of indicating "extra information available" is with a dashed or dotted underline. This may change the cursor to a "Help" cursor, which might look something like this: ......
Andrew Leach's user avatar
  • 4,370
6 votes

Should a dropdown list be closed when mouse leaves?

Apart from what DPS answered, which talks about consistency, I would suggest you go with the click instead of hover. It seems like you have a grid layout, and am sure you don't want to annoy your ...
Mr. Alien's user avatar
  • 326
6 votes

Is it good practice to allow users to navigate simply by hovering on a menu item without clicking?

I'm curious what are the websites where you have seen this pattern emerge. To my knowledge this is not common. I'd see this is unexpected and likely problematic. Imagine for instance if a user ...
Blue Ocean's user avatar
  • 10.7k
5 votes

In Responsive Design, how do you trigger Tooltips? mouse hover isn't there anymore

Both Android and iOS have long press handlers, which can be used to simulate the hover-tooltip effect. The Material Guidelines's mobile section give an example of usage.
mrchaarlie's user avatar
5 votes

Is it good practice to allow users to navigate simply by hovering on a menu item without clicking?

I think it's a derivative of the mega menus hovering effect where it's a fairly common pattern: What is different in the example of the question is that each menu has vertical submenus and this makes ...
Danielillo's user avatar
  • 19.2k
5 votes

Correct buttons hover state

I don't suggest using one button's default state as another ones hover state, because there can be situations where you need to use both sets of buttons next to each other. Imagine having a situation ...
Sepas's user avatar
  • 123
5 votes
Accepted

Do accessibility standards (WCAG AA) require a screen reader to announce an HTML element upon mouse hover?

Two related bugs in NVDA: NVDA reader doesn't read icon on mouse hover Windows 11 Design Elements Are Not Reported by NVDA When Mouse Tracking Is On However, there is nothing in WCAG that requires ...
slugolicious's user avatar
  • 3,305
4 votes

How can I display tool tips on a touchscreen or is there a better way?

I noticed that a Q&A was already held on whether to Tooltip or not to here: To tooltip or not to tooltip? So in all fairness, it may help to actually to answer the asker's question without further ...
Babalwa Mehlomane's user avatar
4 votes

How long should the delay be before a tooltip pops up?

It really depends on what your tooltips are for. We've got lots of toolbar controls and buttons which simply use the Material Design Icon set with no text. Most of these are self explanatory but we'...
Tim's user avatar
  • 181
4 votes

Should a button become lighter or darker on hover?

Taking the examples from Material design - buttons my impression is that buttons become darker if they are light and lighter if they are dark: Flat buttons Raised buttons: the button becomes a ...
Alvaro's user avatar
  • 16.8k
4 votes
Accepted

In Responsive Design, how do you trigger Tooltips? mouse hover isn't there anymore

This is one of the major reasons why tooltips are not a good solution most of the time. My stock argument is that one shouldn't ever have to use tooltips. Either the information is important enough ...
DA01's user avatar
  • 41.8k
4 votes

In Responsive Design, how do you trigger Tooltips? mouse hover isn't there anymore

I think this is really about the discover-ability of UIs. Tooltips are often used as a way to annotate a user interface so that users can learn what all the functions do, without cluttering the UI ...
Franchesca's user avatar
  • 12.5k
4 votes

Hover vs click on mega menu

Click In this particular case, it would be useful to consider some cons or pitfalls of hover too: False positives: hover actions fires every time the mouse pointer is over the menu. But very often ...
wintvelt's user avatar
  • 1,464

Only top scored, non community-wiki answers of a minimum length are eligible