Sentinel: Your Web-Performance Watchman

On negative hovers

Written by on CSS Wizardry.

Table of Contents
  1. Spot the odd one out
  2. Underlines are obtrusive
  3. Intuition
  4. The answer?
    1. Issues
  5. Final word

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:

Dark colour
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.


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.

No underline
On :hover
Add a background colour
Darken/increase contrast


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.

Did this help? We can do way more!

Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.

Suffering? Fix It Fast!


  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk & Workshop

    WebExpo: Prague (Czech Republic), May 2024


I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.