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
2 answers
38 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 ...
user avatar
  • 10.5k
7 votes
3 answers
2k 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 ...
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 ...
user avatar
2 votes
1 answer
77 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 ...
user avatar
2 votes
2 answers
132 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 ...
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, ...
user avatar
3 votes
2 answers
239 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 ...
user avatar
  • 6,716
2 votes
1 answer
145 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 (...
user avatar
  • 41
0 votes
1 answer
59 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 ...
user avatar
0 votes
2 answers
169 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 ...
user avatar
  • 533
3 votes
4 answers
429 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 ...
user avatar
  • 131
1 vote
2 answers
133 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 ...
user avatar
1 vote
2 answers
68 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,...
user avatar
  • 173
3 votes
1 answer
102 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, ...
user avatar
2 votes
3 answers
1k 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 ...
user avatar
  • 2,204
1 vote
1 answer
357 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 ...
user avatar
  • 264
5 votes
5 answers
3k 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 ...
user avatar
3 votes
2 answers
567 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 ...
user avatar
1 vote
1 answer
73 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 ...
user avatar
  • 55
1 vote
3 answers
1k 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 ...
user avatar
  • 2,435
0 votes
1 answer
91 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 ...
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 ...
user avatar
3 votes
1 answer
81 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 ...
user avatar
  • 3,678
2 votes
1 answer
165 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 ...
user avatar
1 vote
1 answer
102 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 ...
user avatar
  • 157
1 vote
1 answer
94 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 ...
user avatar
  • 111
1 vote
3 answers
378 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 ...
user avatar
1 vote
1 answer
228 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 ...
user avatar
  • 7,200
2 votes
2 answers
408 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 ...
user avatar
2 votes
5 answers
1k 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, ...
user avatar
  • 558
3 votes
5 answers
903 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 / ...
user avatar
  • 41
2 votes
3 answers
491 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 ...
user avatar
  • 2,301
86 votes
13 answers
21k 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 ...
user avatar
  • 1,661
5 votes
1 answer
640 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 ...
user avatar
  • 305
8 votes
2 answers
29k 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 ...
user avatar
  • 6,506
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 ...
user avatar
  • 131
5 votes
5 answers
279 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 ...
user avatar
12 votes
1 answer
9k 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 ...
user avatar
  • 1,363
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 ...
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 ...
user avatar
  • 1,062
1 vote
1 answer
185 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 ...
user avatar
  • 16.7k
1 vote
1 answer
490 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 ...
user avatar
  • 881
7 votes
5 answers
14k 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?
user avatar
  • 183
1 vote
3 answers
143 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 ...
user avatar
  • 111
0 votes
1 answer
74 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 ...
user avatar
  • 642
0 votes
2 answers
271 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 ...
user avatar
  • 19.2k
4 votes
3 answers
2k 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 ...
user avatar
  • 3,413
1 vote
1 answer
165 views

How to users like hidden content styled?

I have a avatars table. On hover, I want the avatar's username to appear. On click, the user will go to their personal page. Of these three types of hidden content, which would best suit this purpose? ...
user avatar
  • 1,193
1 vote
1 answer
550 views

Hint for the hover state in both web and mobile versions [duplicate]

I am designing a portfolio page which showcases a list of photographs. Below are is wireframe and my main doubts. Doubts: How will the user know the portfolio items have a description on the hover ...
user avatar
2 votes
1 answer
2k views

Is the context-menu cursor a useful replacement for the pointer when opening a context-menu?

To connote that an element opens a menu and is not a link, we are using cursor: context-menu. See example. Our target browsers all support the cursor. I can't find any relevant discussion on the ...
user avatar