277
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 ...
- 16.3k
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. ...
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 ...
- 606
44
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 ...
- 541
30
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 ...
- 627
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 ...
- 276
22
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 ...
- 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 ...
- 5,053
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 ...
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 ...
- 16.9k
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 ...
- 16.9k
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 ...
- 1,773
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 ...
- 20.4k
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.
- 141
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 ...
- 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 ...
- 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(): ...
- 3,759
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 ...
- 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 ...
- 10.8k
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.
- 869
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 ...
- 20.4k
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 ...
- 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 ...
- 3,327
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'...
- 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 ...
- 16.9k
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 ...
- 41.9k
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 ...
- 12.6k
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 ...
- 1,464
4
votes
Should text links enlarge on hover?
It's best to show that it is a link even before you hover or click. Someone might be using a touch device, which does not have hover states.
Typically this is done by using underlined text in a ...
- 2,378
Only top scored, non community-wiki answers of a minimum length are eligible