:hover should be dead
:hover’s days are numbered. It has little time left in this world.
I am serious.
Here are the main reasons why:
- It doesn’t exist on touch devices
- It isn’t really accessible
- It often creates frustrating interactions
I said touch devices, not mobile, for a reason. Touch devices are expanding out of our phones and into our environment at an increasing rate. They are also expanding into our laptops and desktops. So saying your "target market" is desktop doesn’t mean you can use
Because that guy on a Dell Inspiron that he paid $650 for is also going to struggle with them when he touches your website with his fingers. He might switch back to his touchpad... but he also might just leave frustrated he can’t figure out how to open your menu.
Keyboard users don’t get
hover. They get
active but not
hover. That’s a big deal. Screen readers also aren’t the best with faking
hover if they do it at all. They are great with
Just think about nested hover state menus. There is a reason desktop applications require you to click on at least that first level of menus. Because accidentally moving your mouse off of the menu you just opened shouldn’t close it.
This could have landed under accessibility as well. Imagine for a moment browsing your site with a hand that has a tremor. Think about how hard your menu would be for me if my hand shook.
UX Movement has some nice images and discussion around "hover tunnels" and why they are a huge problem for users.
So let’s get rid of
hover. It doesn’t actually make anything better and it makes lots of things worse. It is a "clever" interaction not a good one.