As of May 31, 2023, we have updated our Code of Conduct.

Questions tagged [hover]

Hover is an interaction state where a pointer (usually a mouse cursor) is held over an item to perform an action or display information.

Filter by
Sorted by
Tagged with
2 votes
1 answer
78 views

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

We are using the screen reader NVDA. We have a website that we are trying to make WCAG AA compliant. If you use only a keyboard (no mouse), and use the Tab key to navigate around the page, whenever an ...
John Gilmer's user avatar
0 votes
0 answers
20 views

What is alternative way to show information without tooltip on mobile? [duplicate]

So i am working on a dashboard project. When I finsished this for desktop it's easy to provide information to user, they have just hover it. Then, I realize, it's not so good to have tooltip on mobile ...
amusakbar's user avatar
0 votes
1 answer
188 views

How do you decide when to make elements darker or lighter on hover?

Looking at Slack by example, the following happens: Buttons in the top navigation bar become lighter, so does the search bar The button to open the workspace menu becomes darker, same for hovering ...
dwiehoff's user avatar
2 votes
2 answers
41 views

When hovering over a charts, which arrow alignment works best

I'm designing the hover states for 2 charts, a bar chart and a line chart. Maybe I'm over thinking, but for both these charts I find there is an arrow alignment that would work better based on the ...
Blue Ocean's user avatar
  • 10.6k
7 votes
3 answers
4k views

Correct buttons hover state

I'm designing an e-commerce interface, and I've a doubt about the correct hover state of the primary button. Is it correct to style the primary button as the secondary's default on hover state as in ...
SpeedUX's user avatar
  • 71
46 votes
9 answers
10k views

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

A pattern I have noticed recently on some (desktop) websites is that users can navigate simply by hovering on menu items. While this is more efficient (fewer clicks) it feels unexpected and therefore ...
Michael Heraghty's user avatar
2 votes
1 answer
201 views

Hover on a card with clickable links

I am working on card which has a clickable link/ clickable options but the card itself is not clickable. I want to add a shadow to the card when someone is hovering on/ clicking on the link. I have ...
harshikerfuffle's user avatar
2 votes
2 answers
208 views

Subtle Hover Design Ideas

I'm using tooltips on my site to show some extra info but i'm finding it hard to make it obvious that the icons are hoverable. I have added in a swirl line that animates, also a pulse animation to the ...
Norman's user avatar
  • 21
0 votes
0 answers
13 views

Hover and Click action on same object on touch devices [duplicate]

I am building a timeline widget which has 2 interactions on web. Hover to see a particular duration's details like duration, start time, assigned name. Click to edit details of the timeline However, ...
harshikerfuffle's user avatar
3 votes
2 answers
321 views

Would users appreciate a mobile hover alternative on a product list?

Edit: Not necessarily only credible sources needed, different opinions from the user's perspective are also welcome. The mobile first approach nowadays often (or sometimes at least) leads to less ...
Big_Chair's user avatar
  • 6,786
2 votes
2 answers
485 views

Hidden actions - Hover effect in the list of items

I'm currently working on WEB app, which will be the main tool for the data analysts. We will have a navigation tree that displays a hierarchical data structure. Each item will need a list of actions (...
Kasia B's user avatar
  • 41
0 votes
1 answer
101 views

Search - autocomplete - hover a result to features in dropdown

I am working on a project where a user has to navigate to any feature for any product. So I came up with a search box component. Here the user can search for a product and when a user hovers on a ...
Hithesh vk's user avatar
0 votes
2 answers
250 views

Is it bad practice to put hover interactions in a table?

Hello! I'm designing a CRM table view for a medical web app, and a core need of our users (mostly surgeons and nurses) is to quickly ascertain the compliance of their patients by viewing whether or ...
Conor's user avatar
  • 533
3 votes
4 answers
488 views

What Micro Interaction to use When Hovering Over a Button?

👋 We are trying to learn/understand UX from first principals and build the most intuitive UI. We are creating buttons in an App and want to know what the ideal micro interaction is when hovering ...
nelsonic's user avatar
  • 141
1 vote
2 answers
184 views

Hover vs. selection? Which one should have higher emphasis in a visual editor software?

My team is working on an email design software that features a drag-and-drop interface that offers very sophisticated drag-and-drop experience compared to others. It enables users to drop elements ...
Roland Pokornyik's user avatar
2 votes
2 answers
102 views

Grid line item status column - how to display broader explanation?

Grid contains transactions of a sort. Each transaction can be: Open, Closed, or Cancelled. There's a "Status" column, and each cell has one of the 3 words in it: Open, Closed, or Cancelled. Now, Open,...
Yelena's user avatar
  • 183
3 votes
1 answer
106 views

Dealing With The Lack of "HOVER" on Smart Phone Web Apps

I made this CardTrick back in 2006, at a time when it would have been predominantly accessed via a desktop computer (and not a smart phone). On a desktop computer, as the mouse hovers over any card, ...
Lonnie Best's user avatar
2 votes
3 answers
2k views

Hover styling for non-clickable elements?

In our system, currently we have good styling and effects for buttons, for example submit button, cancel button etc. Now we have a different element. Let's say it is a summary tag element. Which acts ...
Kishan's user avatar
  • 2,204
2 votes
1 answer
502 views

What's the purpose of this flashlight-like effect in windows callendar?

Is there any specific reason for windows callendar to have this flashlight-like hover effect? If anything it seems to me to be distracting by spreading the area of your current mouse position. Is it ...
aMJay's user avatar
  • 274
5 votes
5 answers
4k views

Hover vs click on mega menu

Now implementing a new mega-menu. The current mega-menu's submenu options are shown on user cursor hover. Would a more explicit action like mouse click be more appropriate for this (like the example ...
zakcreate's user avatar
3 votes
2 answers
712 views

Large Hover Menu/Navigation Menu - Categorically Bad UX?

Due to feedback from a handful of customers that did not understand what our menu icons meant, a hamburger icon was removed from our navigation menu, this hamburger icon was used to expand the ...
Brian Ogden's user avatar
1 vote
1 answer
77 views

Allowing both hover and select state on a section / component

Do you think allowing both hover and select on a component makes sense in the bellow context? The tool is a drag & drop application builder (UI builder). Configuring objects (sections in the page ...
Ioana's user avatar
  • 45
1 vote
3 answers
2k views

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

A tiny disclaimer, not looking for tooltip alternative for mobile as in another UI Pattern, i'm looking for a different interaction that could trigger the tooltip, i hope this makes it clear. The ...
UX Labs's user avatar
  • 2,435
0 votes
1 answer
94 views

Vice versa colors for on and off hover of buttons [closed]

How should we choose the color for buttons is there a should always be a dark and light colour or two differed colors. What will be the best strategy for choosing colours. And is it should always be ...
Mohammed Rabiulla RABI's user avatar
1 vote
1 answer
2k views

Tooltip with a link on it (displayed on hover or on click)?

I have a tooltip with a link on it. What is the best practice of displaying this tooltip: on click or on hover? I will still need a clicked version for tablet. Should the popup have a close icon in ...
contrarios's user avatar
3 votes
1 answer
82 views

Will hover will be extinct? Any research or case studies done on frequency of hover in desktop

I am typing this on my mobile so let me keep it short. I am talking about contents that is revealed on hover in desktop. So what we do in mobile UI is we make it visible at first sight. I want to know ...
Jivan's user avatar
  • 3,678
2 votes
1 answer
204 views

Hovering Navigation Arrows

Is there any modern and accessible approach to implementing "hovering navigation arrows"? I was given a website layout to implement which features "hovering navigation arrows" to navigate to the ...
Diogo Bento's user avatar
1 vote
1 answer
127 views

Preference: Info-tips (info tooltips) or stationary info-areas for Scatter Plots?

I've seen two different ways to display information about a point on an scatter plot A tooltip (info tip) which appears next to your cursor When you hover over a point, information will display in ...
Fractal's user avatar
  • 177
1 vote
1 answer
96 views

What's the approppriate term for the window under the mouse cursor?

In an app I'm writing, the user has the choice to apply a given action to either the "focused window", the "topmost window" or the "window that's being pointed by the mouse". Is there a way to refer ...
GetFree's user avatar
  • 111
1 vote
3 answers
413 views

How do I make it obvious that a button is hoverable?

I need to hide away a piece of text that explains a useful part about using the UI for an app I am making (out of space) and a tooltip will work fine. My concern is that if people see a button they ...
CristianMoisei's user avatar
1 vote
1 answer
299 views

What are the rules MacOs use to determine when to use hover or not on interactive elements?

So, on the web, designers use hover effects (for example a grey button becomes lighter when my pointer is above it) to signal affordance/interactivity for pretty much all types of controls. But on ...
Tony Bolero's user avatar
  • 7,254
2 votes
2 answers
445 views

Shopping cart interaction: how should the user check out?

On our webshop we have a shopping cart icon in the menu bar, that on hover over shows the user what they have in ther cart. Observations in user testing showed that we had a confusing interaction with ...
MichielVXL's user avatar
2 votes
5 answers
2k views

Should a button with a dropdown always have a click action?

I have one button that offers the user up to ~10 choices. The button label says 'apply as' and the dropdown lists all the possible choices. I have multiple choices on how to design this. As a hover, ...
Alesis's user avatar
  • 558
3 votes
5 answers
1k views

Background color when hovering datagrid row

My question is pretty simple. In your opinion, does changing the background color of the hovered row in the datagrid is a plus for the user - or a distraction that should be discarded? All rows / ...
reeax's user avatar
  • 41
2 votes
3 answers
534 views

What is the proper way to make 2 lines of hover dropdown menus not interfere with each other?

For an example of this menu, check this quick code snippet I made on jsFiddle: https://jsfiddle.net/27w3y6dh/ Our own menu is somewhat more complex, but suffers from the same issue. Additional ...
Nzall's user avatar
  • 2,291
87 votes
13 answers
22k views

Should a dropdown list be closed when mouse leaves?

Should a dropdown list be automatically closed when you leave current object and navigate to another, or should it remain opened until you open next dropdown list? Dropdown closed when mouse leaves ...
rpavl's user avatar
  • 1,671
5 votes
1 answer
706 views

Should I show a row icon on hover?

I have several rows of content, with small font icons to the right of each row for actions to take. I feel these icons clutter up the look of the page, so I am considering a default opacity of 0 on ...
dthree's user avatar
  • 305
8 votes
2 answers
31k views

What is the difference between a mouseover and a hoverover? [closed]

I have seen both a 'mouseover' and a 'hoverover' referring to the same thing - but it is not clear if there is a difference. Is there a functional difference between the two terms, or are they ...
Midas's user avatar
  • 6,517
3 votes
1 answer
2k views

How should a mouse-over-for-keyboard-shortcuts be designed?

Our toolbar has a keyboard icon on the right, which, when hovered over, displays a large keyboard reference tooltip. Clicking the icon opens the settings' dialog on the tab for keyboard bindings. My ...
Adám's user avatar
  • 131
5 votes
5 answers
284 views

How would you show separate items (products) that are on a single photo?

Let's say we have an image of a man with cool hat, t-shirt, boots, etc. The idea is to show these items as products, so you can find and buy them if you like. At the moment I see two ways of ...
Romqa Ivanov's user avatar
12 votes
1 answer
11k views

Tooltip CSS cursor

I am at a bit of a loss as to what cursor I should be using for tooltips that have no click through behaviour. I have a hover only tooltip are I currently use the CSS cursor: cursor: pointer However ...
theorise's user avatar
  • 1,353
3 votes
3 answers
3k views

What should the hover state of an outline button look like?

Me and a friend were having a discussion on button design and came across the hover-state of the outline buttons of Marvel. I believe this is not the right approach as an outline button is designed ...
amees_me's user avatar
  • 131
14 votes
2 answers
3k views

How should a coloured dropdown be styled using Google Material?

I am working on a project which is using Google Material UI. I have a set of production statuses that need to be displayed - they are selectable from a list but I am not sure what that list should ...
J4G's user avatar
  • 1,062
1 vote
1 answer
209 views

Can an image overlay be too obstructive?

For this question lets consider only no-touch devices and lets assume it is alright to hide that text. It is common, specially on grid layouts, to display image overlays with different levels of ...
Alvaro's user avatar
  • 16.7k
1 vote
1 answer
507 views

Design for hovering over tile [closed]

I'm creating a portfolio for my websites. I'm going to have tiles that show my work. When you hover over a tile, it will show a title, description, and a preview button. What's the best layout to show ...
Steve's user avatar
  • 881
8 votes
5 answers
17k views

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

On a PC with a mouse one would use the hover state. On touchscreens what's the best way to provide this kind of information?
Howard's user avatar
  • 193
1 vote
3 answers
144 views

Image Blocks with Sub Navigation on Hover

I'm working on a site that has a bunch of categories which I'd like to display graphically on the homepage to help the user navigate to the information most relevant to them. Because there are quite ...
christian's user avatar
  • 111
0 votes
1 answer
76 views

Editing and Deleting smart folders

The web app allows users to create smart folder based on which files are displayed. See wireframe below download bmml source – Wireframes created with Balsamiq Mockups How should I go about ...
Nodnin's user avatar
  • 642
0 votes
2 answers
294 views

Are hover features more discoverable in simple desktop web UIs?

Thinking only in the scope of a desktop website, I'm wondering about the discoverability of mouse hover functionality. Allow me to contrive a scenario to explain my question: Let's say I'm designing ...
maxathousand's user avatar
  • 19.4k
6 votes
3 answers
3k views

Indicate ”hoverable” text

I have a table with “hoverable” text, but how do I make it clear to the user that more information will show up if he hovers over it? I was thinking of an icon at first, but I don’t know if it is ...
efrethe's user avatar
  • 3,443