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
92
votes
11answers
44k views

Should a button become lighter or darker on hover?

We're having a discussion in the office about whether a button should become lighter or darker when a user hovers over it. Here are some examples from the field: Apple "Buy Now" button (Second is ...
81
votes
13answers
18k 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 ...
76
votes
7answers
17k views

Re-thinking “hover” functionality with touchscreens in mind

Take the following page as an example (possibly in Firefox only): As you hover over each search result, an "+ Add to Firefox" button appears. However, that idea of the button appearing upon hovering ...
73
votes
7answers
88k views

Default cursor on mouse over of a button is not a hand pointer

Why is the default cursor an arrow when you hover over an HTML <button>? I always thought that arrows let you select stuff, but hands let you execute an action. Since buttons execute actions, ...
51
votes
8answers
46k views

What are some alternatives to “hover” on touch-based devices?

Came up recently in a 37signals podcast: http://37signals.com/podcast#episode18 The straightforward, "brute-force" solution is to just use the first touch on a UI object as the hover. http://...
36
votes
6answers
3k views

Why this timed-hover “like button”?

I recently caught "Where Good Ideas Come From" by Stephen Johnson on Alex Hillman's blog, and was intrigued by Alex's unique implementation of a 'like button'. Behaviour The element's initial state: ...
35
votes
11answers
11k views

Are hover states necessary?

We're having a discussion in the UX department here at work as to whether or not hover states are necessary to a UI. We're kind of divided. Here are the two arguments: Against (started the discussion)...
25
votes
7answers
2k views

Are hover menus in headers easy to use?

Do users find it easy to use headers/menus like the one displayed below?
23
votes
4answers
7k views

How do users know to hover over elements?

I realized something today. I was looking at a new icon at Airbnb's site, and wanted to hover over it to see if there was anything hidden that would expose on hover: there was. My question: How do ...
21
votes
7answers
18k views

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

I'm working on web site in which a "ribbon" submenu pops up as soon as the mouse touches one of the main menu items. I'm trying to explain to the designer that it should wait until the cursor has ...
19
votes
6answers
2k views

Why is there a convention on the web for dropdown menus on hover instead of on click?

This is something I've always wondered. On all major operating systems, application menus (File/Edit/View etc) only appear on click. However, nearly every web site that uses a drop-down menu ...
19
votes
2answers
8k views

Should the cursor change to pointer over radio buttons, checkboxes, their labels and selects?

I always do so because to me it feels nicer; it implies an action will happen on click. Especially for radio/checkbox labels, where the for attribute is correctly used. This is not the default ...
16
votes
4answers
1k views

Making space for the “drop cue” in a drag-n-drop design

I'm developing a drag-and-drop reordering interface for books on shelves. (You can try it live if you're on the latest WebKit.) When you drag a book over a shelf, it accommodates space for it by ...
15
votes
7answers
13k views

iPad/iPhone alternative for hover states

I've recently updated my personal portfolio with some CSS3 and jQuery magic. I'm extremely pleased with the results and yes, it's fully responsive. But i have an issue. I've structured my portfolio ...
14
votes
6answers
24k views

Alternatives to tooltips in tablets?

I understand this question has been discussed a couple of times on the site. However, it seems not to be getting the answer or inspiration I am looking for. BTW, my background is a programmer in case ...
14
votes
5answers
1k views

box-shadow hover effect when box isn't necessarily clickable

It isn't a secret that giving the user feedback on a link hover (image swap/sprite, link color/decoration change, etc.) is a necessary practice for optimal UX. In css-tricks.com's recent redesign, ...
13
votes
2answers
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 ...
12
votes
8answers
2k views

How can I make it obvious that a page element is to be hovered over?

On my webpage I have five boxes containing the names of each step in a five step process. When the user hovers over one of the boxes, it expands and shows text explaining that process. How can I ...
11
votes
4answers
9k views

Should my menus drop down on hover + on click or just on click?

I have a web application that currently has menus that drop down 'on hover'. This is obviously an issue on tablets, etc. where there is no hover equivalent. So, I need to add an 'on click' ...
10
votes
4answers
730 views

Should we be designing for touch first?

Touch interaction is becoming more ubiquitous and often the only option. Should we be designing for touch first or even touch only? What are the ramifications of taking this approach? As someone ...
9
votes
3answers
2k views

Why are different cursors used when hovering over buttons in Gmail?

In the Gmail interface they are not consistent in which cursor they use on button/link hover. They use the "hand" pointer for: Links in the sidebar(mail, contacts, inbox, starred etc..) The mails ...
8
votes
5answers
6k views

Better to use hover vs. click to display dropdown menus on main navigation of web app?

I work on a web-based medical records system. In the previous version, main horizontal menu employed ExtJS. It used the standard click to display the sub-menu found in ExtJS. I'm considering whether ...
8
votes
3answers
2k views

Change text color when hovering over hyperlink

Should the text color change when hovering over a hyperlink? I usually change my hyperlinks to a lighter shade of blue upon hover. a:link { color: #0088cc; } a:hover { color: #0099dd; } I believe ...
8
votes
1answer
420 views

How often do users overlook controls that are revealed by hovering?

Techniques that reveal controls on hover (as used by apps like twitter) have been suggested as a way to simplify an interface and focus attention on content. However I wonder how many people fail to ...
8
votes
2answers
4k views

Best practices for rollovers on mobile?

I noticed that most mobile browsers transform rollovers into touch/tap actions. This is good, but of course there's no indicator that the action is available to the user. So I was wondering what ...
7
votes
2answers
20k 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 ...
7
votes
1answer
4k 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 ...
7
votes
3answers
1k views

Does the hover functionality on Netflix's website break UI best practice?

For example: My explanation of what's happening in the gif: When a title has been hovered for a short amount of time, that title expands, pushing other content off the screen and grabbing the user's ...
7
votes
8answers
1k views

How to handle tooltips on moving control/object?

My company is building an on-line map which displays moving objects (vehicles) and static objects (bus stops). When the user hovers over an item, a tooltip with additional info about all the objects ...
7
votes
2answers
842 views

Best way to give user two controls (expand and select) on a single object

We're working on an organizational tree visualization, for each node (circle) in the tree the user has two options - expand the node to see its children OR select the node In general, the primary (...
6
votes
3answers
4k views

Mouseover to reveal more data in a table

I have a table containing users like so: download bmml source – Wireframes created with Balsamiq Mockups In the system, users can associate multiple emails with their account. When the user ...
6
votes
2answers
892 views

Hover over icon

Along the lines of visual clues when hovering over a hyperlink, doesn't the same apply to icons? I ask this question since I noticed none of the SE sites I know of have this behavior when hovering ...
6
votes
5answers
5k 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?
6
votes
2answers
1k views

Shading buttons darker than the normal state vs. highlighting

While coding up pieces of a website, I was puzzled as to why the designer chose a hover state that is a shade darker than its normal state. It seems logical to me that a rollover state should be a ...
6
votes
2answers
2k views

Examples of a zoom/pan on hover [closed]

I've got this user interface idea in mind for my dashboard app, and I swear I've seen it before but cannot find an instance of it on the web. The essence is that you present a thumbnail image to the ...
6
votes
4answers
1k views

Navigation & Link Hover State

Note: Please link me if this has been asked, I couldn't find what I was looking for I just had a conversation with my mate who is an Art Director in regards to a website he designed, when it was ...
5
votes
6answers
818 views

Rough and fine adjustments with horizontal slider

I'm used to scrolling being thrice as effective as arrowkeys in Firefox. I want to give the ability to quickly and roughly adjust values by hovering over the slider and using the scrollwheel. Finest ...
5
votes
2answers
269 views

Using hover-overs on the web when the goal is to allow rapid clicking

I'm working to design a webpage where users are presented with a large number of product options, most of which will be irrelevant. Each product will appear as a tile and the tile will disappear upon ...
5
votes
4answers
2k views

showing buttons on hover?

Lately I have noticed that a lot of websites are displaying a delete "X" when you hover over that specific panel. I have been thinking whether or not this was very usable for the user because there is ...
5
votes
3answers
610 views

Why hover colors are often inverted

Recently I see more and more websites using color invertion as a hover visualization. For me it's really annoying as I usually start to read the first few words and than hover over the line to have a ...
5
votes
4answers
854 views

Lowering opacity on hover. Isn't it totally wrong?

It's a common practice to highlight an element on hover state. By highlighting it, I obviously mean making it more visible than other elements. But lately, I've witnessed the opposite trend on a ...
5
votes
1answer
4k views

HTML button Hover effect standards, principles or best practices

Are there any standards, principles or best practices to change the color or effect of a button on hover. Something like : Make it lighter Make it darker Change background and foreground color Add ...
5
votes
3answers
164 views

How large should the active menu area be?

Here are two similar examples of a typical menu bar. What would you expect as an active hover area for click? Should it be the same or different in these two examples? Does the device matter? ...
5
votes
1answer
536 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 ...
5
votes
5answers
250 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 ...
5
votes
4answers
274 views

Hovering over an element to raise opacity

I'm working on a site where we display testimonials on the side of the page. We don't want these to be the main point of interest, so we dimmed the opacity, and on hover it goes to full opacity. We ...
5
votes
5answers
904 views

How to indicate data in a table is clickable on a touch device?

For users on a touch device, what is the convention for indicating each figure (cell) is clickable to a page with information on where the figure originated? On desktop it would be easy to have a ...
4
votes
3answers
823 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 ...
4
votes
3answers
4k views

Choosing the hover color of a link, logically

The menu color of the apple website fades out when you hover it, which I believe is wrong because hovering an item is like activating it, hence a positive action. With that said, what's a logical ...
4
votes
1answer
2k views

How does Windows 7 Aero taskbar determine button hover-state background colour [closed]

This has intrigued me for quite some time. Does anyone know the algorithm Windows 7 Aero uses to determine the colour to use as the mouse-tracking hover highlight on taskbar buttons for currently-...