On negative hovers

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

I’ve been mentioning moaning about something called negative hovers on Twitter for ages now, so it’s about time I wrote a quick post on them.

At their most basic a negative hover is a link whose appearance is subtracted from on hover rather than added to. This might mean they go from:

Normal

Dark colour

Underlined

A background

On :hover

Paler colour

Not underlined

No background

Or any combination of the above.

It is in my (and lots of other people’s) opinion that these are a bad thing. Here I’ll try and explain why I don’t like them. Be sure to look at the negative hovers example so the rest makes sense to you.

Spot the odd one out

Hovering any of the links in the list or the paragraph removes their underline or background which puts them on the back seat, surrounded by the overpowering underlines/backgrounds of the other links surrounding it. The hovered link is the odd one out, but in the wrong direction. The odd one out should be more apparent than its neighbours, not less.

Hover any link on this page and see how hard it is to quickly see which one is hovered. It’s pretty difficult, because its appearance is so much more modest than the links that aren’t even being hovered at all!

Now compare that with this page.

Imagine a user has tabbed to those link. They don’t have their mouse cursor over the ‘current’ link as a visual cue, they’re lost looking for an non-underlined link in a sea of underlined ones. This makes the whole experience more difficult than it needs to be.

Underlines are obtrusive

Underlines are just plain ugly. Especially when you’ve got a few links in continuous text. If you start off with underlined links all you can notice is lines. The text becomes secondary to the underlined links and that makes reading and scanning a chore. You don’t want to interrupt someone’s reading experience with unsightly underlines.

Intuition

The least quantifiable/solid argument is that it just feels wrong. That doesn’t sound like a great argument, but bear with me…

If you hover or act on something in a positive way (giving it attention, wanting to perform something), you would expect that to respond in a positive way, right? If you want to click a link that will, say, take you to another page, you don’t want that link to ‘shy away’ from you, do you? It feels more intuitive that that link would ‘stand forward’ and act positively, becoming more-than-it-was as soon as you focus your attention upon it.

As a UI designer/developer I think this ‘feeling’ speaks volumes. It doesn’t seem right that a positive* action would result in a negative appearance…

*Positive meaning ‘doing something’, even if that something is negative (such as a deletion). Does that even make sense?

The answer?

Positive hovers, of course!

If you started with a pale blue, make it darker on :hover. If you started on a non-underlined link, underline it on hover, or give it a background colour. Simply make its appearance more than what it was before you hovered it.

Normal

No underline

Underlined

Background

On :hover

Underlined

Add a background colour

Darken/increase contrast

Issues

There is only one issue I can think of, specifically when starting off non-underlined; accessibility. Colour blind users may not necessarily be able to distinguish a link based on colour alone. Try and use a decent contrasting colour to avoid this…

Final word

So there you have my thoughts on negative hovers. They’re counter-intuitive and can be obtrusive, but do you agree? Let me know! I’d be interested to hear any counter arguments.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.