When CSS was new the vast majority of web browsing took place on a desktop or laptop computer with a mouse attached. Thus, when the :hover pseudo-class started to have wide browser support, many people figured out how to stretch it to its limits. People created everything from tooltips that revealed important information when hovering over an element to dynamic, multi-layered cascading menus powered by CSS alone. Many people wrote articles and blog posts showing others how to stretch :hover to its limits and do some amazing things, and those posts are still floating around today.

However, just because you can do these things it doesn’t mean you should. Today there are a huge number of people browsing the web who can’t hover, either because their device doesn’t have a mouse cursor or the way they’re interacting with the web doesn’t involve a mouse. If you use :hover for any critical functionality you’re excluding a significant portion of your audience, and the number of people that fall into this category is climbing.

The biggest and most obvious group of people who will never see any of your :hover styles or functionality are people using smartphones, but they’re not alone. A lot of tablets are touch-only. Many people, either by choice or by necessity, navigate the web with only a keyboard. There’s also no concept of a mouse cursor when you’re blind, or have impaired vision, and are browsing the web using a screen reader.

The :hover pseudo-class is great for anything that isn’t critical. Enhancing the appearance of links and menu items, highlighting rows in tables so they’re easier to read, and other visual enhancements that are not critical to the way your site functions are great applications for :hover. Go ahead and use them, but be sure to keep people without mice in mind!